Gửi mã thông báo mang theo axios

Trong ứng dụng phản ứng của tôi, tôi đang sử dụng axios để thực hiện các yêu cầu api REST.

Nhưng nó không thể gửi tiêu đề Ủy quyền cùng với yêu cầu.

Đây là mã của tôi:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

Ở đây, validToken()phương pháp sẽ chỉ trả lại mã thông báo từ bộ nhớ của trình duyệt.

Tất cả các yêu cầu đều có phản hồi lỗi 500 nói rằng

Không thể phân tích cú pháp mã thông báo từ yêu cầu

từ back-end.

Làm thế nào để gửi tiêu đề ủy quyền với mỗi yêu cầu? Bạn có đề xuất bất kỳ mô-đun nào khác với react không?

const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

Tham số đầu tiên là URL.
Thứ hai là phần thân JSON sẽ được gửi theo yêu cầu của bạn.
Tham số thứ ba là các tiêu đề (trong số những thứ khác). JSON cũng vậy.

Đây là một cách độc đáo để đặt Mã thông báo ủy quyền trong axios. Đặt cấu hình cho mọi cuộc gọi axios không phải là một ý tưởng hay và bạn có thể thay đổi mã thông báo Ủy quyền mặc định bằng cách:

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

Chỉnh sửa , Cảm ơn Jason Norwood-Young.

Một số API yêu cầu ghi tên là Bearer, vì vậy bạn có thể làm:

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

Bây giờ bạn không cần thiết lập cấu hình cho mọi lệnh gọi API. Giờ đây, mã thông báo Ủy quyền được đặt thành mọi lệnh gọi axios.

Tham số thứ hai của axios.postlà data(not config). configlà tham số thứ ba. Vui lòng xem chi tiết này: https://github.com/mzabriskie/axios#axiosposturl-data-config

Bạn có thể tạo cấu hình một lần và sử dụng nó ở mọi nơi.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

Bằng cách sử dụng bộ đánh chặn Axios:

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

Nếu bạn muốn một số dữ liệu sau khi chuyển mã thông báo trong tiêu đề, hãy thử mã này

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

Điều này hoạt động và tôi chỉ cần đặt mã thông báo một lần trong app.js:

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

Sau đó, tôi có thể thực hiện các yêu cầu trong các thành phần của mình mà không cần đặt lại tiêu đề.

"axios": "^0.19.0",

axiosbản thân nó đi kèm với hai "phương pháp" hữu ích không phải là phương pháp interceptorstrung gian giữa yêu cầu và phản hồi. vì vậy nếu trên mỗi yêu cầu bạn muốn gửi mã thông báo. Sử dụng interceptor.request.

Tôi đã thực hiện dự trữ giúp bạn:

$ npm i axios-es6-class

Bây giờ bạn có thể sử dụng axios làm lớp

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

Ý tôi là việc triển khai middlewaretùy thuộc vào bạn hoặc nếu bạn thích tạo axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a của riêng mình thì đó là phương tiện đăng nó đến từ đâu

Đây là những gì tôi cũng phải đối mặt. Mã thông báo mà bạn đang chuyển không đúng.

Chỉ cần Hardcode mã thông báo và vượt qua, bạn sẽ nhận được phản hồi chính xác. Nhưng nếu mã thông báo không được chuyển trong một dấu ngoặc kép '', thì nó chắc chắn sẽ thất bại. Nó phải ở định dạng 'Ủy quyền': 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', trong đó sau Bearer, một dấu cách duy nhất phải có, điều này cũng rất quan trọng bên trong.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

IMP: Đoạn mã trên sẽ hoạt động Nhưng nếu bạn đăng một cái gì đó như:

'Cấp phép': 'Bearer' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, nó sẽ không thành công

hoặc ----- mã bên dưới cũng sẽ không thành công, tôi hy vọng bạn hiểu được sự khác biệt cơ bản

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};