Axios Interceptor 사용하기

Spring Boot에서 JWT를 구현하던 중, 토큰의 유효하지 않거나 권한이 맞지 않을 때의 응답헤더에 에러코드와 함께 관련 메세지를 전달해야했다.

응답으로 에러코드를 프론트로 전달하면, 에러코드에 대비한 예외처리를 해줘야하는데... 이걸 매번 하기엔 귀찮아지고 실수할 가능성이 커진다.

그래서 예전에 Spring Boot에서 사용했던 Interceptor 가 React, 정확히는 axios 에서도 지원을 한다.

Axios 사용하기

사용해보기

import axios from 'axios';
export default axios.create({
    baseURL: "http://localhost:8080/rest/v1",
    headers: {
        "Content-type":"application/json",
    }
});

↑ 이전에 axios 를 효율적으로 사용하기 위해 커스텀한 axios이다.

const { default: axios } = require('axios');

const instance = axios.create({
    baseURL: "http://localhost:8080/rest/v1",
    headers: {
        "Content-type":"application/json",
        // 'X-AUTH-TOKEN': `${localStorage.getItem('X-AUTH-TOKEN')}`
    },
});

instance.interceptors.request.use(
    config => {
        config.headers["X-AUTH-TOKEN"] = localStorage.getItem('X-AUTH-TOKEN');
        
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)

instance.interceptors.response.use(response => {
    // console.log(response);
    return response;
}, error => {
    if(error.response.status === 401) {     //토큰 유효시간 지날 때
        alert("로그인 후, 시도하세요.");
        
    }
    console.log(error.response.status);
});

export default instance;

끝!