vue-element-admin 登录拦截设置白名单
vue-element-admin
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/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'
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
更多推荐
已为社区贡献3条内容
所有评论(0)