主页鉴权验证（permission.js）

通过前置守卫与后置守卫来实现

前置守卫开启进度条
后置守卫关闭进度条

import router from "./router";  //引入路由
import nprogress from 'nprogress'  //引入进度条
import 'nprogress/nprogress.css' //进度条样式

// 前置守卫
router.beforeEach((to, from, next) => {
  nprogress.start()   // 开启进度条
  next()
})
// 后置守卫
router.afterEach(() => {
  nprogress.done()   //关闭进度条 
})

完整代码

import router from "./router";  //引入路由
import nprogress from 'nprogress'  //引入进度条
import 'nprogress/nprogress.css' //进度条样式
import store from "./store";

// 前置守卫
// 声明白名单
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
  nprogress.start()   // 开启进度条
  // 判断有没有token 
  if (store.getters.token) {
    if (to.path === '/login') {
      // 跳转到主页
      next('/')
      // next(地址)，并没有执行后置守卫,所以手动关闭进度条
      nprogress.done()
    } else {
      next()  //放过
    }
  } else {
    // 没有token，if在白名单里就放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') //跳转到登录页
      nprogress.done()
    }
  }
})
// 后置守卫
router.afterEach(() => {
  nprogress.done()   //关闭进度条 
})