[Vue.js] 세션이 끊겼을 때 화면 전환 방법

1. router 에 expired 이름으로 셋팅

{

    path: '/expired',

    name: 'expired',

    component: () => import('@/views/loginExpired'),

    hidden: true,

  },

 

2.interceptors 처리

service.interceptors.response.use(

  (error) => {

     if (error.response && (error.response.status === 401 || error.response.status === 403)) {

       // 로그아웃 처리 및 로그인 페이지로 이동

       router.push({ name: 'expired' });

       return Promise.reject(error);

     }

     return Promise.reject(error);

    },

}

 

세션이 끊기면 401 or 403 에러가 발생한다.

response에서 에러 코드를 분기하여 expired 화면으로 전환하고 Promise.reject 처리를 하여 뒷 로직이 수행되지 않도록 막는다.