axios로 Bearer 토큰 보내기

내 반응 앱에서 axios 를 사용하여 REST API 요청을 수행하고 있습니다.

그러나 요청과 함께 Authorization 헤더 를 보낼 수 없습니다 .

내 코드는 다음과 같습니다.

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

여기서 validToken()메서드는 브라우저 저장소에서 토큰을 반환합니다.

모든 요청에는 다음과 같은 500 오류 응답이 있습니다.

요청에서 토큰을 구문 분석 할 수 없습니다.

백엔드에서.

각 요청과 함께 인증 헤더를 보내는 방법은 무엇입니까? 반응이있는 다른 모듈을 추천 하시겠습니까?

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

첫 번째 매개 변수는 URL입니다.
두 번째는 요청과 함께 전송되는 JSON 본문입니다.
세 번째 매개 변수는 (무엇보다도) 헤더입니다. JSON도 마찬가지입니다.

다음은 axios에서 인증 토큰을 설정하는 고유 한 방법입니다. 모든 axios 호출에 구성을 설정하는 것은 좋은 생각이 아니며 다음과 같은 방법으로 기본 인증 토큰을 변경할 수 있습니다.

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

편집 , Jason Norwood-Young에게 감사드립니다.

일부 API는 Bearer를 Bearer로 작성해야하므로 다음을 수행 할 수 있습니다.

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

이제 모든 API 호출에 구성을 설정할 필요가 없습니다. 이제 인증 토큰이 모든 axios 호출에 설정됩니다.

의 두 번째 매개 변수 axios.post는 data(아님 config)입니다. config세 번째 매개 변수입니다. 자세한 내용은 https://github.com/mzabriskie/axios#axiosposturl-data-config 를 참조하십시오.

구성을 한 번만 만들어 어디서나 사용할 수 있습니다.

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 인터셉터 사용 :

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

이 코드를 시도하도록 헤더에 토큰을 전달한 후 일부 데이터를 원한다면

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

이것은 작동하며 토큰을 한 번만 설정하면됩니다 app.js.

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

그런 다음 헤더를 다시 설정하지 않고 구성 요소에서 요청할 수 있습니다.

"axios": "^0.19.0",

axios그 자체로 interceptors요청과 응답 사이의 미들웨어에 불과한 두 가지 유용한 "방법"이 있습니다. 따라서 각 요청에서 토큰을 보내려는 경우. 를 사용합니다 interceptor.request.

나는 당신을 돕는 패키지를 만들었습니다.

$ npm i axios-es6-class

이제 axios를 클래스로 사용할 수 있습니다.

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

나는의 구현을 의미 middleware 귀하에 따라 다르거 나 자신의 axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a 를 만드는 것을 선호하는 경우 매체입니다 출처를 게시하다

이것은 내가 또한 직면 한 것입니다. u가 전달하는 토큰이 올바르지 않습니다.

토큰을 하드 코딩하고 통과하면 올바른 응답을 얻을 수 있습니다. 그러나 토큰이 작은 따옴표 ''로 전달되지 않으면 확실히 실패합니다. 'Authorization'형식이어야합니다. 'Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ'형식이어야하며, Bearer 뒤에는 작은 따옴표 안에도 하나의 공백이 있어야합니다.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP : 위의 코드는 작동하지만 다음과 같이 게시하면 :

'Authorization': 'Bearer'+ YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, 실패합니다

또는 ----- 아래 코드도 실패합니다. 기본 차이점을 이해하기를 바랍니다.

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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