Taşıyıcı belirtecini axios ile gönderme

React uygulamamda REST api isteklerini gerçekleştirmek için axios kullanıyorum .

Ancak , istekle birlikte Yetkilendirme başlığını gönderemez .

İşte kodum:

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

Burada validToken()yöntem, jetonu tarayıcı deposundan döndürür.

Tüm isteklerde 500 hata yanıtı var.

Jeton, istekten ayrıştırılamadı

arka uçtan.

Yetkilendirme başlığı her talepte nasıl gönderilir? React özelliğine sahip başka bir modül önerir misiniz?

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

İlk parametre URL'dir.
İkincisi, isteğinizle birlikte gönderilecek JSON gövdesidir.
Üçüncü parametre başlıklardır (diğer şeylerin yanı sıra). Bu da JSON.

İşte aksiyolarda Yetkilendirme belirtecini ayarlamanın benzersiz bir yolu. Yapılandırmayı her axios çağrısına ayarlamak iyi bir fikir değildir ve varsayılan Yetkilendirme jetonunu şu şekilde değiştirebilirsiniz:

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

Düzenle , Jason Norwood-Young'a teşekkürler.

Bazı API, taşıyıcının Taşıyıcı olarak yazılmasını gerektirir, böylece şunları yapabilirsiniz:

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

Artık her API çağrısı için yapılandırma ayarlamanıza gerek yok. Artık Yetkilendirme belirteci her axios çağrısına ayarlanmıştır.

İkinci parametresi axios.postolan data(değil config). configüçüncü parametredir. Ayrıntılar için lütfen buna bakın: https://github.com/mzabriskie/axios#axiosposturl-data-config

Yapılandırmayı bir kez oluşturabilir ve her yerde kullanabilirsiniz.

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

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

Axios önleyiciyi kullanarak:

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

Başlığa belirteç ilettikten sonra bazı veriler istiyorsanız, bu kodu deneyin

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

Bu işe yarıyor ve jetonu şu öğemde yalnızca bir kez ayarlamam gerekiyor app.js:

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

Daha sonra üstbilgiyi yeniden ayarlamadan bileşenlerimde istekte bulunabiliyorum.

"axios": "^0.19.0",

axioskendi başına iki kullanışlı "yöntem" ile birlikte gelir interceptors; bunlar, istek ve yanıt arasında hiçbir ortak yazılım değildir. bu nedenle, her istekte belirteci göndermek istiyorsanız. Kullanın interceptor.request.

Size yardımcı olacak bir paket hazırladım:

$ npm i axios-es6-class

Artık axios'u sınıf olarak kullanabilirsiniz

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

Demek istediğim, uygulama middlewaresize bağlıdır veya kendi axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a'nızı oluşturmayı tercih ederseniz , bu ortamdır geldiği yere gönder

Bu benim de karşılaştığım şey. Gönderdiğiniz jeton doğru değil.

Sadece jetonu sabit kodlayın ve geçin, doğru yanıtı alacaksınız. Ancak belirteç tek alıntıda iletilmezse '', o zaman kesinlikle başarısız olacaktır. 'Yetkilendirme' biçiminde olmalıdır: 'Taşıyıcı YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', burada da Taşıyıcıdan sonra tek tırnak içinde çok önemlidir.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: Yukarıdaki kod işe yarayacaktır. Ancak şöyle bir şey gönderirseniz:

'Yetkilendirme': 'Taşıyıcı' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, başarısız olacak

veya ----- aşağıdaki kod da başarısız olur, umarım temel farkı anlıyorsunuz

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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