axios 에 토큰 값 담아서 전송하기, config vs axiosInstance

방법1: axios의 config 옵션이용

axios 요청의 옵션을 설정하는 config 부분에서 요청 헤더에 토큰을 담을 수 있다. 다만 이 방법을 사용하면 매 요청마다 요청 헤더에 토큰을 담아 보내주어야 한다 => 번거롭다.

const onSubmit = async (e) => {
	e.preventDefault();
    const token = localStorage.getItem("key");
    await axios.post('http://localhost:8080/board/write', post, {
    headers: {
    	'Authorization': `Bearer ${token}`
        }
	});
    console.log('Post added');
    setmessage('New post Added');
    setalertColor("success")
    getBoards(); // Fetch users again after adding a new user
    handleCloseModal();
};

방법2: axiosInstance 이용

axiosInstance 를 이용하면 매 요청에 기본적으로 헤더에 토큰을 포함시킬 수 있다. 이걸 사용하자.

const axiosInstance = axios.create();//Axios 인스턴스 생성
axiosInstance.interceptors.request.use(
	(config) => {
    	const token = localStorage.getItem("key")
        if(token){
        	config.headers['Authorization'] = `Bearer ${token}`;
		}
        return config;
	},
    (error) => {
    	return Promise.reject(error);
	}
)
...
const onSubmit = async (e) => {
	e.preventDefault();
    const token = localStorage.getItem("key");
    await axiosInstance.post("http://localhost:8080/board/write", post)
    	.then(response => {})
        .catch(error => {})

	console.log('Post added');
    setmessage('New post Added');
    setalertColor("success")
    getBoards(); // Fetch users again after adding a new user
    handleCloseModal();
};