目标:登录成功时, 不允许切换路径进入登录页面
可以在在和man.js同级处,建个permission.js文件
第一步:全局前置守卫判断
// 从零开始做权限控制
import router from '@/router'
import store from '@/store'
// 引入progress插件
// 下载 yarn add nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// start() 开始显示进度条 done() 结束进度条
// 时机: 路由发生跳转之前先开启 在正式跳转完毕之后关闭
// 路由全局前置导航守卫
const whiteList = ['/login', '/404']
router.beforeEach((to, from, next) => {
// to: 目标路由对象 去哪里
// from: 来源路由对象 从哪里来
// next: 放行方法
// 开启跳转
NProgress.start()
const token = store.getters.token
if (token) {
// 有token
if (to.path === '/login') {
// 如果有token且去往登录 则跳转到首页去
next('/')
} else {
next()
}
} else {
// 没有token
// 如果在白名单内 直接放行
if (whiteList.includes(to.path)) {
next()
} else {
// 不在白名单内 跳回到登录页
next('/login')
}
}
// 结束
NProgress.done()
})
第二步,导入main.js
// 导入权限管理
import './permission' // 直接导入js文件,会把里面所有的代码都执行