安装nprogress进度条插件

一、安装命令：npm install --save nprogress

二、创建一个permission的js文件，并引入安装的permission

permission.js代码：

import router from './router'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken, removeToken } from '@/utils/auth' // get token from cookie

NProgress.configure({ showSpinner: false }) // NProgress Configuration
// 设置白名单，在白名单中的路由跳转不做限制，不在白名单中的有路由跳转限制。
const whiteList = ['/login', '/auth-redirect', '/profile'] // no redirect whitelist
// 路由导航守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = to.meta.title || '内务管理系统'
  // determine whether the user has logged in
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = to.meta.roles && to.meta.roles.length > 0
      if (hasRoles) {
        console.log('path:' + to.path)
        next()
      } else {
        removeToken()
        next(`/login?redirect=${to.path}`)
        NProgress.done()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }

  if (to.path) {
    if (window._hmt) {
      window._hmt.push(['_trackPageview', '/#' + to.fullPath])
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

将token存在了cookie中：

三、在入口文件中引入以上perssion.js文件：

四、效果展示