前沿

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

今天我们就来讲一下在后台的权限管理系统中，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做权限验证管理就讲到这里

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧