[인스타그램 클론코딩] 04. JWT 필터 구현(Front-End)

헤더에 JWT accessToken을 주입하여 요청할 수 있도록 새로운 axios를 모듈로 생성한다.

 

import axios from "axios";

const headers = {
    'Authorization': 'Bearer ' + localStorage.getItem("accessToken"),
    'Access-Control-Allow-Origin': '*',
}

const withJwtAxios = axios.create({
    baseURL: '/api',
    headers: headers
});

withJwtAxios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        return Promise.reject(error);
    }
);
export default withJwtAxios;

 

- baseUrl 은 서버로 요청하기위해 '/api', 그리고 헤어데는 localStorage에 있는 accessToken 값을 가져온다.

 

withJwtAxios.get("/follow")
    .then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    });

 

- 이 모듈은 다음과 같이 사용할 예정이다.