后台管理系统如何利用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)
// 跳转到动态生成的第一个路由页面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做权限验证管理就讲到这里