Mengirim token pembawa dengan axios

Di aplikasi react saya, saya menggunakan axios untuk melakukan permintaan REST api.

Tetapi tidak dapat mengirim header Otorisasi dengan permintaan tersebut.

Ini kode saya:

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

Di sini validToken()metode hanya akan mengembalikan token dari penyimpanan browser.

Semua permintaan memiliki respon kesalahan 500 yang mengatakan itu

Token tidak dapat diurai dari permintaan

dari ujung belakang.

Bagaimana cara mengirim header otorisasi dengan setiap permintaan? Apakah Anda akan merekomendasikan modul lain dengan react?

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);

Parameter pertama adalah URL.
Yang kedua adalah badan JSON yang akan dikirim bersama permintaan Anda.
Parameter ketiga adalah header (antara lain). Yaitu JSON juga.

Berikut adalah cara unik untuk menyetel token Otorisasi di axios. Menyetel konfigurasi ke setiap panggilan axios bukanlah ide yang baik dan Anda dapat mengubah token Otorisasi default dengan:

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

Edit , Terima kasih kepada Jason Norwood-Young.

Beberapa API mengharuskan pembawa untuk ditulis sebagai Pembawa, jadi Anda dapat melakukan:

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

Sekarang Anda tidak perlu menyetel konfigurasi ke setiap panggilan API. Sekarang token Otorisasi disetel ke setiap panggilan axios.

Parameter kedua axios.postadalah data(tidak config). configadalah parameter ketiga. Silakan lihat ini untuk detailnya: https://github.com/mzabriskie/axios#axiosposturl-data-config

Anda dapat membuat konfigurasi satu kali dan menggunakannya di mana saja.

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

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

Dengan menggunakan pencegat 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);
  }
);

Jika Anda ingin beberapa data setelah melewati token di header maka coba kode ini

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)
});

Ini berfungsi dan saya perlu menyetel token hanya sekali di app.js:

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

Kemudian saya dapat membuat permintaan di komponen saya tanpa menyetel header lagi.

"axios": "^0.19.0",

axiosdengan sendirinya hadir dengan dua "metode" yang berguna interceptorsyang tidak lain adalah middlewares antara permintaan dan respons. jadi jika di setiap permintaan Anda ingin mengirim token. Gunakan interceptor.request.

Saya membuat paket yang membantu Anda:

$ npm i axios-es6-class

Sekarang Anda dapat menggunakan axios sebagai kelas

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);
   }
}

Maksud saya penerapannya middlewaretergantung pada Anda, atau jika Anda lebih suka membuat axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a sendiri, itu adalah medianya pos dari mana asalnya

Inilah yang juga saya hadapi. Token yang Anda berikan salah.

Cukup Hardcode token dan pass, Anda akan mendapatkan respons yang benar. Tetapi jika token tidak dikirimkan dalam tanda kutip tunggal '', maka pasti akan gagal. Itu harus dalam format 'Otorisasi': 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', di mana setelah Bearer harus ada satu spasi, juga di dalam tanda kutip tunggal.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: Kode di atas akan berfungsi Tetapi jika Anda memposting sesuatu seperti:

'Otorisasi': 'Pembawa' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, itu akan gagal

atau ----- kode di bawah ini juga akan gagal, saya harap u memahami perbedaan dasarnya

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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