用途:
在vue中我们一般把登录拦截及权限处理在permision.js文件中并在min.js中导入;
当页面跳转时判断用户是否登录及token是否过期,若token过期/未登录则会重定向到login页面;
但有些项目除了登录页还有用户注册页面,此时需要设置白名单使得可以直接从login页面跳转至regist页面而不会被重定向到login页;
permision.js:
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
const whiteList = ['/login','/regist'] //白名单
router.beforeEach(async (to, from, next) => {
// 确定用户是否已经登录
const hasToken = localStorage.getItem('token')
if (hasToken) {
if (to.path === '/login') {
// 如果已登录,则重定向到主页
next({
path: '/'
})
}else{
//权限处理部分,可参考vue-element-admin框架中permision.js权限处理部分
}
} else {
//没有token的情况
if (whiteList.indexOf(to.path) !== -1) {
// 如果在白名单内则直接跳转
next()
} else {
// 其余页面重定向到登录页
next(`/login?redirect=${to.path}`)
}
}
})
切记要在min.js中引入该js: import './permission'