24.09.10 개인프로젝트 트러블슈팅 axios instance에 동적으로 데이터 추가하기

해당 개인프로젝트 이전 트러블슈팅 - uncontrolled input

import axios from "axios";
const userAccessToken = localStorage.getItem("accessToken");

const authInstance = axios.create({
    baseURL: "https://moneyfulpublicpolicy.co.kr",
});

export const handleSignup = async (userObj) => {
    const response = await authInstance.post("/register", userObj);
    return response.data;
};

export const handleLogin = async (userObj) => {
    const response = await authInstance.post("/login", userObj);
    return response.data;
};

const userInstance = axios.create({
    baseURL: "https://moneyfulpublicpolicy.co.kr",
    headers: { "Authorization": `Bearer ${userAccessToken}` },
});

export const getUserData = async () => {
    const response = await userInstance.get("/user");
    return response.data;
};

const updateUserInstance = axios.create({
    baseURL: "https://moneyfulpublicpolicy.co.kr",
    headers: {
        "Authorization": `Bearer ${userAccessToken}`,
        "Contene-Type": "multipart/form-data",
    },
});
export const updateUserData = async (formData) => {
    const response = await updateUserInstance.patch("/profile", formData);
    return response.data;
};

로그인 후, localStorage에 저장된 accessToken을 axios instance를 사용하여 header에 동적으로 넣고, GET요청을하였는데, 토큰이 정상적이지 않다는 에러가 발생했다. 이전에도 됐다 안됐다 했던 문제라 유저정보서버의 문제겠거니 했는데, 문제는 내 코드였다.

 

네트워크의 해당 요청 헤더를 살펴보니 토큰이 들어가야할 자리에 null이 들어가있었다.

 

localStorage에서 해당 토큰을 완전히 가져오기 전에 데이터 요청을 하여 생긴 문제라고 생각하여 해당 문제를 해결해야겠다는 생각을 하였다.

 

처음으론 로컬스토리지에서 토큰을 가져오고 데이터 요청하는 과정을 동기적 처리로 해결하려 했지만, 올바르지 않은 방법이라고도 생각이 들었고 뭔가 틀린 방법이라는 느낌이 강하게 들었다.

그래서 axios에서 제공해주는 interceptor을 사용해서 request요청을 가로채 헤더에 토큰을 집어넣도록 하였다.

문제가 일단은 고쳐졌다. 근데 또 일어날수도 있다는 생각이 들긴한다. 일단은 해결

const userInstance = axios.create({
    baseURL: "https://moneyfulpublicpolicy.co.kr",
});
userInstance.interceptors.request.use((config) => {
    const accessToken = localStorage.getItem("accessToken");
    if (config.headers && accessToken) {
        config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
});

export const getUserData = async () => {
    const response = await userInstance.get("/user");
    return response.data;
};

const updateUserInstance = axios.create({
    baseURL: "https://moneyfulpublicpolicy.co.kr",
    headers: {
        "Contene-Type": "multipart/form-data",
    },
});

updateUserInstance.interceptors.request.use((config) => {
    const accessToken = localStorage.getItem("accessToken");
    if (config.headers && accessToken) {
        config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
});

export const updateUserData = async (formData) => {
    const response = await updateUserInstance.patch("/profile", formData);
    return response.data;
};

만약 에러가 더 발생하지 않는다면 앞으로 instance를 생성할 때 동적으로 데이터를 추가하는 것은 지양하고, interceptor을 사용하여 동적데이터를 추가해야겠다.