后台管理系统如何利用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做权限验证管理就讲到这里