vue-element-admin登录拦截设置白名单方式
更新时间：2024年03月12日 10:25:21 作者：阁下何不同风起？
这篇文章主要介绍了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和登陆页面放入白名单再进行逻辑处理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了JavaScript获取echart曲线上任意点位的值详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了vue全局数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
今天小编就为大家分享一篇vue-router 中 meta的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在现代Web应用中,前端路由控制是非常重要的一部分,它可以帮助我们将不同的页面内容展示给用户,同时保持用户在浏览不同页面时的连贯性,本文将介绍如何使用Vue Router来实现前端路由控制,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue数组响应式操作及高阶函数使用代码详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要介绍了Vue页面加载完成后如何自动加载自定义函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue实现的多页面项目如何优化打包的步骤详解，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-07-07
我们通常会用到脚手架vuecli创建项目,此时需要安装脚手架,下面这篇文章主要给大家介绍了关于vue脚手架安装以及安装失败问题的解决办法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue如何实现el-select下拉选项的懒加载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论