社区编辑申请
注册/登录
后台管理系统如何利用Vue-Router做权限验证管理
开发 项目管理
今天我们就来讲一下在后台的权限管理系统中,Vue-Router是如何配合实现的。

前沿

后台管理系统中权限验证是比较核心的一块内容,每个登录用户都有对应的角色,每个角色都有对应的权限,比如普通用户只有查看权限,管理员用户有编辑权限,所以不同的用户角色登录进来后,看到的页面菜单是不一样的

今天我们就来讲一下在后台的权限管理系统中,Vue-Router是如何配合实现的

后台管理系统

具体实现

其实要实现起来也比较简单,主要是借助Vue-Router的两个api

1、addRoutes

通过 router.addRoutes 动态挂载路由信息,用户成功登录后,由后台返回当前用户所具有的权限菜单

// 登录成功后,后台返回权限数据如下
const menuList= [
{
// 菜单名字
name: '文章管理',
// 是否是菜单,true是,false是页面
isFolder: true,
// 图标
icon: 'article',
// 是否在导航栏不显示,false表示显示
hidden: false,
// 路由url
url: '/article',
// 子菜单
menuList: [{
// 菜单名字
name: '文章编辑',
// 是否是菜单,true是,false是页面
isFolder: false,
// 图标
icon: 'edit',
// 是否在导航栏不显示,false表示显示
hidden: false,
// 路由url
url: '/article/edit',
// 子菜单
menuList: [],
}]
},
{
name: '用户管理',
isFolder: false,
icon: 'user',
hidden: false,
url: '/user/manage',
menuList: [],
}
]

// 我们根据Vue-Router需要的数据
// 把上面后台返回的数据做一次转化
const routes= [{
// 路由路径
path: '/article',
// 如果是菜单,那么引用通用的布局模板
component: () => import('@/views/layout.vue'),
meta: {
// 图标
icon: 'article',
// 菜单名字
title: '文章管理',
// 是否在导航栏隐藏
hidden: false,
},
children: [{
// 这是页面路由
path: '/article/edit',
name: 'article/edit',
// 具体的页面组件
component: () => import('@/views/article/edit.vue'),
meta: {
// 图标
icon: 'edit',
// 页面名字
title: '文章编辑',
// 是否在导航栏隐藏
hidden: false,
},
}],
},
{
path: '/article/edit',
name: 'article/edit',
component: () => import('@/views/article/edit.vue'),
meta: {
icon: 'edit',
title: '文章编辑',
hidden: false,
},
},
]

// 最开始的路由配置是有一个登录页的
const initRoutes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login'),
meta: {
icon: '',
title: '登录',
hidden: true,
},
},
]

// 登录成功后
// 再把动态生成的路由信息和登录页的路由拼接起来
// 生成最后的路由信息
router.addRoutes(initRoutes.concat(routes))

// 最后通过router.push(url)
// 跳转到动态生成的第一个路由页面

至于页面内部的按钮根据用户角色显示和隐藏,比如说普通用户是看不到页面的“编辑”按钮

其实我们可以在用户登录成功后,让后台再把当前这个用户的角色信息返回并存在Vuex中,比如返回['user']代表普通用户,返回['manage']代表管理员,返回['user','mange']代表又有管理员的权限和又有普通用户的权限,然后我们就可以在页面中根据这个值判定是否显示对应的按钮

2、beforeEach

通过 router.beforeEach 这个导航守卫,控制没有登录的用户,始终只能先去登录页登录,如果是已经登录过的,那么就直接进入对应页面

// 这里可以放一些,不需要权限校验的菜单
const NoAuthUrlList = [
'/500',
'/demo',
]
router.beforeEach((to, from, next) => {
if (NoAuthUrlList.includes(to.path)) {
// 不需要权限校验的,直接进入页面
next()
} else {
// 需要权限校验的
if (!store.getters.token) {
// 没有token代表没有登录过
// 直接去登录页
next('/login')
} else {
// 有token
// 直接进入登录页
next()
}
}
})

好了Vue-Router做权限验证管理就讲到这里

责任编辑:姜华 来源: 今日头条
相关推荐

2022-06-15 11:51:14

Vue3开发避坑

2022-06-20 22:37:25

Linux操作系统命令

2021-05-14 07:35:06

Vue Router 特性变化

2022-06-23 09:22:57

Vue技巧前端

2022-05-17 08:39:05

VueViteTypeScript

2022-05-16 10:36:08

GitHub开源项目

2022-06-15 09:01:41

2022-04-01 10:41:09

Vue.js开发工具

2022-06-14 23:34:10

Linux安全服务器

2022-06-07 14:15:44

Vue开发工具

2022-05-09 11:19:12

CSS函数开源

2022-06-20 13:34:46

漏洞网络攻击

2022-06-20 14:57:50

漏洞安全威胁

2022-06-16 15:42:16

攻击面管理ASM

2022-06-10 07:45:09

CentOS国产操作系统

2022-06-15 08:21:49

Linux运维工程师

2022-06-03 09:41:03

DockerKubernetes容器

2022-06-23 12:43:36

区块链加密货币

2022-06-23 11:42:22

MySQL数据库

2022-06-01 17:47:24

运维监控系统

编辑推荐

从人肉运维到智能运维,京东金融服务监控的进阶之路阿里10年分布式数据库技术沉淀,AliSQL X-Cluster的应用实战爱奇艺CTO汤兴:道天地将法,《孙子兵法》的管理之道强一致、高可用、自动容灾能力背后,阿里X-Paxos的应用实践猫眼电影李明辉:机器学习在票房预估中的实战
我收藏的内容
点赞
收藏

51CTO技术栈公众号