Vue - 네비게이션 가드

네비게이션 가드란?

네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법

사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다.

 

설치

npm install vuex --save

 

main.js 에 추가 

import store from './store'

createApp(App)
  .use(store)
  .use(router)
  .use(ElementPlus)
  .use(VueMoment)
  .mount('#app')

위 코드 추가하기

 

 

router / index.js 에 아래코드 추가

 

{
    path: '/send/sendListBoard',
    name: 'sendListBoard',

    component: () =>
      import(
        /* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/send/sendListBoard.vue'
      ),
    beforeEnter: (to, from, next) => {
      console.log(to)
      console.log(from)
      if (!localStorage.getItem('memId')) return next('errorBlockView')
      next()
    }
  },

 

 

beforeEach() 인자 

 

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

 

if문으로 localStorage.getItem을 통해 memId 값을 확인 만약 로그인한 'memId' 가 있지 않으면 접근할 수 없는 페이지 창 출력 localStorage 란? 

 

 

해당 페이지에 로그인 없이 접속하면 아래같은 화면이 출력된다. 다른 페이지도 로그인 하지않은 회원이 접속 시도를 하면 이와 같은 방식으로 처리하면 된다.