localStorage.getItem 에러

localStorage setItem, getItem 에러

App.vue에서 유저 인증을 하기 위해 다음과 같은 로직을 짰다.

export default {
  name: "App",
  data: () => ({
    //
  }),
  created() {
    // token 저장
    // eslint-disable-next-line no-unused-vars
    const [_, accessToken] = location.search.split("token=");
    if (accessToken) {
      store.dispatch("setToken", { accessToken });
      location.replace("/");
      return;
    }

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

    if (!token) {
      router.replace("/login").catch(() => {});
      return;
    } else if (token) {
      store.dispatch("checkUser");
      return;
    }
  },
  mounted() {},
};
</script>

oAuth 서버에서 URL query로 token을 넘겨주면 token을 localStorage에 저장하고 리다이렉트해서 저장된 token으로 유저인증을 하려고 했다.

그러나 location.replace('/') 후에 user api 통신이 Unauthorized error가 나고 다시 한번 user api 통신이 이루어졌다(이때는 성공).

원인을 분석해보니 location.replace("/") 후 아래 남아있는 코드들을 읽어서 그런것!

근데 dispatch('checkUser')를 해줬으면 token이 들어갔다는 건데 왜 에러가 날까?

답은 axios headers 설정에 있었다.

매번 header로 token을 설정해주는 것을 모듈화하기 위해 myAxios를 만들어 사용했다.

const headerConfig = {
    headers: {
        Authorization: "Bearer " + localStorage.getItem('token')
    },
};

const BASE_URL = process.env.VUE_APP_SERVER_URL;

const myAxios = {
  GET: (path) => {
    return axios.get(BASE_URL + path, headerConfig());
  }, ...
};

이때 headerConfig를 가져오는 시점이 token을 저장한 이전시점이라 header에 token이 null로 담기는 것이었다.

headerConfig를 동적으로(?) 실행시키기 위해 함수화하고 나니 getItem시점이 token 저장 이후 시점이 되었고 정상적으로 동작이 되었다.

const getToken = () => localStorage.getItem("token");

const headerConfig = () => {
  return {
    headers: {
      Authorization: "Bearer " + getToken(),
    },
  };
};