后台管理系统如何使用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做权限验证管理就讲到这里
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
……