Mengirim token pembawa dengan axios


118

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?


Saya tidak berpikir itu axiosmasalah sama sekali. periksa validToken()fungsi Anda , fungsi mengembalikan sesuatu yang tidak dimengerti oleh server Anda.
xiaofan2406

Saya memeriksa ulang fungsinya dan juga menggunakan string token di sini sebagai ganti
fungsi``

Jawaban:


140
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.


4
Anda melewatkan ruang antara pembawa dan token - maka itu akan berhasil.
Desember

Pos dokter: "key:" value "memiliki kutipan yang harus dihapus ... Namun perbaikan itu membuat auth berfungsi untuk aplikasi react-native saya.
mediaguru

1
@mediaguru Thx untuk komentarnya. Saya memperbaikinya (saya kira)! Kutipan itu pasti telah diperkenalkan oleh seseorang yang mengedit jawabannya ...
Dokter

2
Bearerharus digunakan dengan modal B, bukan?
Alizadeh118

1
@ Alizadeh118 Ya, menurut spesifikasi HTTP. Tetapi banyak api tidak menuntut kapitalisasi yang benar.
OneHoopyFrood

60

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.


18
Bearerperlu menggunakan huruf besar untuk beberapa API (saya menemukan cara yang sulit).
Jason Norwood-Young


23

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

Dari mana nilai token diteruskan dalam contoh ini? Untuk aplikasi saya, token akan dikirimkan kembali ke api baik di header atau body setelah login berhasil.
Ken

di siniheaders: {'Authorization': 'Bearer '+token}
M.suleman Khan

Bagaimana cara melewatkan data jika itu adalah permintaan POST
M.suleman Khan

Bagi yang bertanya-tanya dari mana nilai token bisa diteruskan, berikut adalah sintaks es6 -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Jeet

18

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

1
Apakah ini standar komunitas untuk mengonfigurasi tajuk dengan axios?
5ervant

@ 5ervant Saya mengalami waktu yang sangat buruk menggunakan pendekatan ini. Itu sangat menyakitkan dan saya tidak merekomendasikannya.
ankush981

@ ankush981 apa yang buruk tentang pendekatan ini dan mana yang Anda rekomendasikan?
Nenad Kaevik

1
@NenadKaevik Ada kasus penggunaan tertentu yang saya coba tutupi (intersepsi respons): memberi tahu pengguna ketika server mengatakan 403 sebagai tanggapan. Orang-orang biasanya meletakkan langkah verifikasi token selama pemuatan komponen, tetapi anggaplah token Anda tidak valid beberapa detik setelah diverifikasi (untuk alasan apa pun). Sekarang ketika orang tersebut mengklik tombol, saya ingin mereka tahu bahwa mereka telah logout. Sulit untuk melakukan ini menggunakan pencegat karena mereka menambahkan perilaku global. Saya masuk ke loop reload karena interseptor permintaan akan selalu menambahkan token dan interceptor respons akan mengalihkan
ankush981

@NenadKaevik Jadi, mungkin alirannya sulit dicapai atau saya menggunakan pendekatan yang salah, tetapi sejak itu saya mulai membenci interseptor.
ankush981

9

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

2

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",


Saya tidak tahu mengapa tetapi dengan cara ini tidak berfungsi di Safari pada perangkat iOS :(
ZecKa

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


-4

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"
};
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.