[VUE] 토큰체크하기

오늘 받은 요청사항:

• 홈페이지를 제외한 모든 페이지에 토큰 체크 로직 넣어주세요. 외부 유출되면 안됩니다.
• 매니저 접근은 https://xxxxxx.com/manager 이렇게 가고 토큰이 없으면 login 화면을, 있으면 apply 화면을 보여주면 되겠네요.

 

❖ 토큰체크

:로그인 안 했는데 관리자모드로 진입하면 안 되니까 토큰을 체크하는 것입니다.

1. src/utils/authentication.ts에서 checkTocken() 정의하기

export const checkToken = async (next: NavigationGuardNext, type: string) => {
  const accessToken = getStorage('accessToken');
  const refreshToken = getStorage('refreshToken');
  const isMain = type === 'main';
  const isHome = type === 'home';
  alert(accessToken);
  try {
    if (!accessToken) {
      if (refreshToken) {
        await issueRefreshToken();
        // eslint-disable-next-line no-unused-expressions
        next();
      } else {
        // eslint-disable-next-line no-unused-expressions
        next();
      }
    } else {
      axiosInstance.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
      // eslint-disable-next-line no-unused-expressions
      isMain ? next() : next();
    }
  } catch (e) {
    const err = e as errorDataType;
    if (err.errorCode === 'ERR_OAUTH_TOKEN') {
      await requestPostLogout(refreshToken ?? '');
      deleteStorage('accessToken');
      deleteStorage('refreshToken');
      // eslint-disable-next-line no-unused-expressions
      isMain ? next(login) : next();
    }
  }
};

 

src/router/index.ts에서 checkToken() 실행하기

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior() {
    document.getElementById('main')?.scroll(0, 0);
  },
});

router.beforeEach(async (to, from, next) => {
  const checkRoute = useCheckRouteStore();

  checkRoute.initRoute(to.path);
  if (to.path === login) {
     await checkToken(next, 'login');
     return;
   }

   if (to.path === home) {
     await checkToken(next, 'home');
     return;
   }

  await checkToken(next, 'apply'); //토큰체크
});

 

 

로그아웃을 통해 토큰제거하기

src/layouts/LayoutManager.vue

const signout = () => {
  try {
    postUserSignout(userData.id);
    deleteStorage('accessToken');
    deleteStorage('refreshToken');
    deleteStorage('userId');
    deleteLocalStorage('accessToken');
    deleteLocalStorage('refreshToken');
    deleteLocalStorage('userId');

    userData.$reset();
    pushPage('/');
  } catch (error) {
    const errData = error as errorDataType;
    console.log(errData);
  }
};