原理

用vue-router來控制使用者登入許可權的原理，實際上就是應用了vue-router提供的router.beforeEach來註冊一個全域性鉤子。具體用法

根據判斷是否具有登入許可權來設定路由跳轉，如果沒有全選統一跳轉到登入頁面。

第一步：新建一個名字為permission的js檔案，程式碼如下

import router from './router'
import NProgress from 'nprogress' // Progress 進度條
import 'nprogress/nprogress.css'// Progress 進度條樣式

router.beforeEach((to, from, next) => {
  NProgress.start(); //
 
 開啟Progress
  if (sessionStorage.getItem('accessToken')) {
    next()
  } else {
    if (to.path ==="/login"|| to.path ==='/register'){
      next()
    }else {
      next('/login')
    }
    NProgress.done()
  }
});
router.afterEach(() => {
  NProgress.done() // 結束Progress
});

在mian.js中匯入permission.js,程式碼如下：

import './permission' // 許可權