前沿
后台管理系统中权限验证是比较核心的一块内容,每个登录用户都有对应的角色,每个角色都有对应的权限,比如普通用户只有查看权限,管理员用户有编辑权限,所以不同的用户角色登录进来后,看到的页面菜单是不一样的
今天我们就来讲一下在后台的权限管理系统中,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)
// 跳转到动态生成的第一个路由页面
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
至于页面内部的按钮根据用户角色显示和隐藏,比如说普通用户是看不到页面的“编辑”按钮
其实我们可以在用户登录成功后,让后台再把当前这个用户的角色信息返回并存在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()
}
}
})
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
好了Vue-Router做权限验证管理就讲到这里