vue-element-admin登录拦截设置白名单方式
作者：阁下何不同风起？
这篇文章主要介绍了vue-element-admin登录拦截设置白名单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-element-admin登录拦截设置白名单
用途：
在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'
vue-element-admin正确使用登录拦截设置白名单
用途：
在vue中我们一般把登录拦截及权限处理在permision.js文件中并在min.js中导入；
当页面跳转时判断用户是否登录及token是否过期，若token过期/未登录则会重定向到login页面；
但有些项目除了登录页还有用户注册页面，此时需要设置白名单使得可以直接从login页面跳转至regist页面而不会被重定向到login 。
以下是使用代码 。
我把404和登陆页面放入白名单再进行逻辑处理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。