axios와 함께 bearer 토큰 전송

axios와 함께 bearer 토큰 전송

리액트 앱에서는 악시오스를 사용하여 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()method는 단순히 브라우저 스토리지에서 토큰을 반환합니다.

모든 요청에서 다음과 같은 오류 응답이 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);

입니다.
두 번째는 당신의 요청에 따라 발송되는 JSON 바디입니다.
세 번째 파라미터는 헤더(특히)입니다.JSON 。

다음은 Authorization 토큰을 axi로 설정하는 고유한 방법입니다.모든 Axios 콜에 설정을 하는 것은 좋은 방법이 아닙니다.기본 인가 토큰은 다음과 같이 변경할 수 있습니다.

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

일부 API에서는 베어러를 베어러로 기술해야 하므로 다음을 수행할 수 있습니다.

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

이제 모든 API 호출에 구성을 설정할 필요가 없습니다.이것으로 Authorization 토큰은 모든 Axios 호출로 설정됩니다.

구성을 한 번 생성하여 어디에서나 사용할 수 있습니다.

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

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

의 두 .axios.postdata)configconfig세 번째 파라미터입니다.자세한 것은, https://github.com/mzabriskie/axios#axiosposturl-data-config 를 참조해 주세요.

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

누군가 같은 문제에 직면했을 때를 대비해서.

여기서 문제는 데이터 없이 헤더를 전달할 때 헤더의 구성이 payload 데이터에 있기 때문에 데이터 대신 null을 전달하고 헤더의 구성을 설정해야 한다는 것입니다.

const config = {
         headers: {
             "Content-type": "application/json",
              "Authorization": `Bearer ${Cookies.get("jwt")}`,
         },
    };    
axios.get(`${BASE_URL}`, null, config)

만 하면 됩니다.app.js:

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

그러면 다시 헤더를 설정하지 않고도 내 컴포넌트에서 요청을 할 수 있습니다.

"axios": "^0.19.0",

다른 파일을 사용하여 instance를 초기화함과 동시에 intercipters를 추가합니다.그러면 인터셉터는 각 콜에서 토큰을 요청 헤더에 추가합니다.

import axios from 'axios';
import { getToken } from '../hooks/useToken';

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = getToken();
    const auth = token ? `Bearer ${token}` : '';
    config.headers.common['Authorization'] = auth;
    return config;
  },
  (error) => Promise.reject(error),
);

export default axiosInstance;

서비스 파일에서 사용하는 방법은 다음과 같습니다.

import { CancelToken } from 'axios';
import { ToolResponse } from '../types/Tool';
import axiosInstance from './axios';

export const getTools = (cancelToken: CancelToken): Promise<ToolResponse> => {
  return axiosInstance.get('tool', { cancelToken });
};

// usetoken은 훅이다.미쳤다

export const useToken = () => {
     return JSON.parse(localStorage.getItem('user')).token || ''
}
const token = useToken();



const axiosIntance = axios.create({
    baseURL: api,
    headers: {
        'Authorization':`Bearer ${token}`
    }
});

axiosIntance.interceptors.request.use((req) => {
    if(token){
        req.headers.Authorization = `Bearer ${token}`;
    }
    return req;
})

빈 데이터를 사용하여 투고 요청을 보내는 경우 다음 예시와 같이 두 번째 매개 변수를 항상 빈 개체 또는 빈 문자열로 설정해야 합니다.예: axios.post axios.post end-point-url-here 、 ' , config )

설정하지 않으면 두 번째 파라미터로 전달되는 것이 무엇이든 formData로 간주됩니다.

const config = {
      headers: { Authorization: `Bearer ${storage.getToken()}` }
    };
    axios
      .post('http://localhost:8000/api/v1/get_token_payloads', {}, config)
      .then(({ data: isData }) => {
        console.log(isData);
      })
      .catch(error => {
        console.log(error);
      });

투고 요청의 두 번째 파라미터 본문은 비어 있는 경우에도 언급해야 합니다.다음 절차를 수행합니다.

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

다음과 같이 헤더를 설정할 수 있습니다.

const headers = {"Content-Type": "text/plain", "x-access-token": token}

가로채기는 다음과 같이 액ios에서 사용할 수 있습니다.

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

상세한 것에 대하여는, https://axios-http.com/docs/interceptors 를 참조해 주세요.

여러 가지 좋은 해결책이 있지만 나는 이것을 사용한다.

let token=localStorage.getItem("token");

var myAxios=axios.create({
  baseURL: 'https://localhost:5001',
  timeout: 700,
  headers: {'Authorization': `bearer ${token}`}
});

export default myAxios;

myaxios를 파일로 Import하고

myAxios.get("sth")

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/@entoOrveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a의 중간 포스트입니다.

언급URL : https://stackoverflow.com/questions/40988238/sending-the-bearer-token-with-axios