[nuxtjs] $auth auth._token_expiration.local

개요

auth와 nuxt/axios를 사용 중입니다.

auth에 토큰 올려두고, axios로 요청을 보내는데, 유효기간이 만료되면, 토큰은 남아있고,  auth._token_expiration.local에 유효시간이 만료되면, auth._token_expiration.local가 false가 되고, 로컬 스토리지에 토큰은 남아 있는 일이 발생했습니다.

 

auth._token_expiration.local가 false처리가 된 경우, 브라우저에서  일어나는 일은..

- 로그아웃 됨. $auth.loggedIn = false

- 로컬스토리지에 토큰이 남아 있음.

 

문제

여기서, 문제는 로컬스토리지에 토큰이 사라지지 않고 남아 있다는 겁니다. 그래서, axios에서 이 남아 있는 토큰으로 요청을 보내다보니, 아래와 같은 에러가 발생했습니다.

ExpiredAuthSessionError: Both token and refresh token have expired. Your request was aborted. at eval (runtime.mjs?edb1:926:1)

 

 

$auth의 토큰 유효시간을 수정하는 법.

nuxt.config.js

{
  auth: {
    strategies: {
      local: {
        token: {
          maxAge: 60, // 👈 만료시간 지나면, false됨
          required: false,
          type: false,
        },
        endpoints: {
          login: { url: '/v2.2/auth/signin', method: 'post', propertyName: 'data.token' }, // response 형태가 { token: '' } 임 },
          user: false,
          // user: { url: `/v2.2/my`, method: 'get', propertyName: 'token' },
        },
      },
    },
  },
  // ... 
}

 

 

 

해결 방법

auth의 토큰이 만료되었을 때, api를 요청하면 에러가 발생합니다. 이 에러를 axios 인터셉터에서 발견하고, 대응하면 되겠다고 생각했습니다.

 

nuxt.config.js

{
  plugins: ['~/plugins/axios.interceptors.client.js'],
}

/plugins/axios.interceptors.client.js

export default function ({ $axios }) {
  $axios.onResponse((res) => {
    return res.data;
  });
  // 🛠 추가
  $axios.onError((error) => {
    if (error.name === 'ExpiredAuthSessionError') {
      localStorage.removeItem('auth._token');
      redirect('/');
    }
    if (error.response) {
      console.error(`${error.response}`);
    }
  });
}