[Vue.js] Router 접근 권한 부여하기(Router Navigation Guard)

페이지마다 회원/비회원, 관리자/사용자 등 ROLE에 따른 접근 권한이 필요한 경우가 있다.
이를 router의 meta 속성과 router navigation guard를 이용해 구현할 수 있다.

예를 들어, 다음과 같은 3가지의 router가 존재한다고 가정해보자.

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {},
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {},
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: {}
    }

각 router의 meta 속성에 접근 가능한 role을 추가해준다.
만약, 누구나 접근 가능하게 하려면 meta속성의 roles가 비어있으면 된다.

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        roles: []  // 누구나 접근 가능
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {
        roles: ['ROLE_ADMIN', 'ROLE_USER'] // 관리자, 사용자 권한이 있어야 접근 가능
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: {
        roles: ['ROLE_ADMIN'] // 관리자 권한이 있어야 접근 가능
    }

각각의 router가 실행되기 전에 beforeEach 메소드가 실행된다.
이 메소드에는 다음과 같은 3가지 매개변수가 들어온다.

• to : 이동할 url 정보가 담긴 router 객체
• from : 현재 url 정보가 담긴 router 객체
• next : to에서 지정한 url로 이동하기 위해 꼭 호출해야 하는 함수

router.beforeEach((to, from, next) => {
    let roleStatus = '..' // 권한 상태
    if (to.meta.roles && !to.meta.roles.includes(roleStatus)) {
      alert('해당 페이지에 접근 권한이 없습니다.')
      next(from)
    } else {
      next()
    }

router.beforeEach()를 호출하고 나면 모든 routing이 대기 상태로 전환된다.
다음 url로 routing 하기 위해서는 next()를 호출해줘야 화면이 전환된다.