화면별 권한 설정

화면별 권한이 필요할 경우, vue-router에서 제공하는 네비게이션 가드를 이용해 화면에 접근 후 발생하는 이벤트들을 관리할 수 있다.

 

📌네비게이션 가드

vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다.

 

🧿전역 가드

router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다.

 

🧿라우트 별 가드

beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있다.

 

나의 경우 전역 가드와 라우트 별 가드 둘 다 설정했다.

프로젝트에 JWT를 적용했는데, 토큰 유무뿐만 아니라 토큰이 있어도 유효 기간이 만료된 경우도 있어서 일괄 처리를 위해 전역 가드를 사용했고 , 사용자가 이미 로그인한 상태에서 다시 로그인 화면에 접근하면 홈 화면으로 리디렉션 하도록 개별 라우트 가드를 사용했다.

 

📌화면 경우의 수

1. 권한이 없어도 되는 화면(로그인)
   next() 실행
   
   
2. 권한이 있어야 하는 화면(나머지 화면)
   2-1. 권한 있어야 하는 화면 + 토큰이 없는 경우
   next('/') 실행
   2-2. 권한 있어야 하는 화면 + 토큰이 있는 경우
   next() 실행
   2-3. 권한 있어야 하는 화면 + 토큰이 있지만 만료된 경우
   next('/') 실행

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: FullContainer,
      children: [
        {
          path: '/',
          name: 'login',
          component: Login,
          meta: { authorized: false },
          // 각 라우트에 별도로 줄 수 있는 가드 beforeEnter
          // 로그인 화면 진입 전 토큰 체크하고 토큰이 있으면 home 화면으로 이동
          // => 사용자가 이미 로그인한 상태에서 로그인 화면(/ 경로)에 접근하는 것을 방지하기 위해 설정
          beforeEnter(to, from, next) {
            const token = getToken()
            if (token) {
              next('/home')
            } else {
              next()
            }
          }
        },
        {
          path: '/home',
          name: 'home',
          component: Home,
          // 라우트 메타 필드 설정
          // authorized => 토큰이 필요한지 미리 설정
          meta: { authorized: true }
        }
      ]
    },
  ]
})

// 네비게이션 가드 > 전역 가드 설정
router.beforeEach(async (to, from, next) => {
  const token = getToken()
  const userStore = useUserStore()
  // to => 대상 Route 객체
  // 대상 Route 객체가 가지고 있는 메타 필드 값 중 authorized가 true이면 토큰이 필요한 화면
  if (to.meta.authorized && !token) {
    // 토큰이 필요한 화면인데, 토큰이 없거나 유효하지 않다면(만료된 토큰)
    // 토큰 리셋을 위해 로그아웃(토큰 리셋 코드가 포함되어 있음)하고
    await userStore.actionHttpLogout()
    // 슬래시('/') 화면으로 리디렉션
    next('/')
  } else {
    // next() => 파이프라인의 다음 훅으로 이동
    next()
  }
})

export default router

 

---

Vue-router 공홈은 설명이 참 잘 되어있다!

https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html

네비게이션 가드 | Vue Router