Vue-router 설정 / 네비게이션 가드 하는 방법

* 환경 : vue-cli 4.x 버전 / vue2를 사용 한 환경입니다. 

 

1. vue-router 설치

npm install vue-router

 

2. router 기본 파일 만들기

루트 폴터에 /router/router.js 파일을 생성한다.

//router.js

import VueRouter from 'vue-router'
import Vue from 'vue'
import store from '../store/storeIndex'

Vue.use(VueRouter)

//1
const router = new VueRouter({
	//2
    mode:'history',
  	routes: [
    //3
    {
      path: '/',
      redirect: '/web/rank'
    },
    {
    //4
      path: '/web/error',
      component: () => import('../views/AccessModal')
    },
    {
      path: '/web/login',
      component: () => import('../views/LoginPageView')
    },
   
  ]
})

export { router }

 

1. new VueRouter() : router를 구성 한다.

 

2. mode: 'history'를 하지않는 경우 맨 앞에 #가 추가 되기 때문에 history로 설정 해 주어야 한다.

ex) https://crispypotato.tistory.com/  => https:#//crispypotato.tistory.com/ 

 

3. 유저가 url에 /으로 접속을 해도 /web/login(메인 페이지)로 접속할수 있게 리다이렉트를 해준다.

 

4. 유저가 /login 으로 접속을 할 때 이때 우리가 만든 LoginPageView를 다운 받는다. 그 후 접속 /login 페이지를 띄워준다.

 

3. 유저 권한이 있는 접근 제한 라우터 만들기 (네비게이션 가드)

권한이 있는 유저와 없는 유저를 나눠야 할 때  사용한다.

 

 {
    //5
      path: '/web/rank',
      component: () => import('../views/RankingView'),
      meta: {
        auth: true
      }
    },
    //6
    {
      path: '/web/manager/list',
      component: () => import('../views/ManagerListView'),
      beforeEnter: (to, from, next) => {
        if (store.state.name !== '짱구') {
          next('/web/error')
        }
        next()
      },
      meta: {
        auth: true
      }
}
    
//5
router.beforeEach((to, from, next) => {
  if (to.meta.auth && !store.getters.login) {
    next('/web/login')
    return
  }
  next()
})

 

5-1. 권한이 필요한 곳에 true로 넣어준다.

meta: {
        auth: true
      }

5-2. 맨 마지막 router.beforeEach() 함수를 만들어서 전역 등록을 한다. 

to : 대상 라우트로 이동

from :  현재 라우트로 오기전 라우트 

next : 훅을 해결하기 위해 호출된다. 권한이 없거나 틀렸을 경우 다른 페이지로 이동시키기 위함

 

5-3. 설정한 meta데이터와 store.getters.login 값을 확인

router.beforeEach()에서 해당 url에 등록한 meta가 있는지 확인을 하고  store.getters.login 값을 확인하여 false 값이 하나라도 포함된게 있으면 /web/login으로 보내주고 없다면 해당 url로 이동을 한다. 

 

6. 5번에서 네비게이션 가드를 거치고 더 세세한 권한이 필요 한 페이지일 경우

beforeEnter 를 확인 후 알맞은 권한이면 요청 페이지로 이동시켜주고 권한이 틀리거나 없다면 이용하여 store.state.userName 이 짱구가 아니라면 /web/error 페이지로 이동하도록 설정한다.