白名单路由守卫_具有进度条组件

白名单路由守卫_具有进度条组件

进度条需要安装,admin后台模块内置的有

进度条插件 "nprogress": "0.2.0",

import router from '@/router' // 引入路由
import store from '@/store' // 引入store实例
import NProgress from 'nprogress' // 引入进度条插件 "nprogress": "0.2.0",
import 'nprogress/nprogress.css' // 引入进度条样式
const whitelist = ['/login', '/404'] // 定义白名单,不受路由守卫控制
// 路由前值守卫
router.beforeEach((to, from, next) => {
//to 将要访问的路径 from 从哪个路径来  next() 放行 next('/login') 强制跳转
    NProgress.start() // 开启进度条
    if (store.getters.token) { // 判断是否有token
        if (to.path === '/login') { //判断是否要去率登录页面
        next('/') // 具有token且要去登录页面,让他直接跳往主页,
        } else { // 具有token且访问的不是登录页面,正常访问,放行
            next()
        }
}  else { // 没有token,用户没登录
    if (whitelist.indexOf(to.path) > -1) { // 查询是不是白名单路径,如果是直接放行,
        next() // 登录和404肯定放行啊,难道你想再跳转登录页面?
    } else {
        // 如果没有token且没在白名单,直接跳往登录页面
        next('/login')
    }
    }
    NProgress.done() // 手动强制关闭 解决手动切换地址时进度条不关闭
})
//  后置路由
router.afterEach(function () {
    NProgress.done() // 关闭进度条
})