Summary

계정에 따른 권한별 lnb메뉴가 다르더라도 URL path를 직접 입력하면 접근이 불가능(안보이는 메뉴)하던 라우터에 진입이 가능하다.
이때, 라우터가드를 사용하여 URL path 접근을 막아줘야 한다.

Goals

• 로그인 하지 않으면 다른 화면으로 라우터 이동이 불가하다.
• 로그인을 했더라도 특정 화면에 권한이 없는 계정은 접근할 수 없다.

Plan

1. 라우터 가드 세팅 및 설정

//src/router/index.js
import {createRouter} from 'vue-router'
import routes from './routers'

const router = creaetRouter({
	mode : 'history',
  	history : createWebHistory(),
  	routes,
})

router.beforeEach((to, from, next) => {
	// to : 이동할 url,
  	// from : 현재 url,
  	// next : 훅의 변동을 호출할 때 사용
  next(false)
)}

• router인스턴스를 생성하고 beforeEach() API를 호출하여 모든 라우팅을 대기상태로 만든다 => 화면이 전환되지 않도록 설정한다

2. path에 meta 정보를 추가한 뒤, 로그인 정보가 없을 때에는 alert 처리를 한다.

//src/router/routes.js

const routes = [
  {
  	path : '/views/SignUp'
    name : 'SignUp',
    component : 'SignUp',
  },
  {
  	path : '/receiving/manage'
    name : 'ReceivingManage',
    component : 'ReceivingManage',
    meta : {authRequired : true}
  },
]

export default routes

//src/router/index.js

router.beforeEach((to, from, next) => {
	// to : 이동할 url,
  	// from : 현재 url,
  	// next : 훅의 변동을 호출할 때 사용
  const authRequiredList = routers.filter(router=> router.meta.authRequired)
  if(authRequiredList) alert('로그인이 필요합니다')
  else next()
)}

• meta에 등록한 authRequired 프로퍼티가 false일 때에만 라우터 이동이 가능하고 이때 next() 호출하여 to path 이동한다.

3. path의 meta 정보에 허용할 권한들을 설정하고, 로그인 한 유저의 권한을 포함하지 않을 때 이전 path로 redirect 시킨다.

//src/router/routes.js
  const routes = [
  {
  	path : '/views/SignUp'
    name : 'SignUp',
    component : 'SignUp',
  },
  {
  	path : '/receiving/manage'
    name : 'ReceivingManage',
    component : 'ReceivingManage',
    meta : {authRequired : true, allows : ['first']}
  },
  {
  	path : '/receiving/manage2'
    name : 'ReceivingManage2',
    component : 'ReceivingManage2',
    meta : {authRequired : true, allows : ['first', 'second']}
  },    
]
export default routes

//src/router/index.js

router.beforeEach((to, from, next) => {
	// to : 이동할 url,
  	// from : 현재 url,
  	// next : 훅의 변동을 호출할 때 사용
  const authRequiredList = routers.filter(router=> router.meta.authRequired)
  if(authRequiredList) {
    alert('로그인이 필요합니다')
   	to.matched. 
   
  } 

  else next()
)}

• meta 프로퍼티에 세팅된 allows 리스트가 현재 로그인 된 유저의 권한을 포함하면 next()로 라우터를 이동하고, 아니면 from 를 사용하여 페이지를 redirect 처리한다.