Fork me on GitHub

如何在 vue 项目中构建权限菜单

发表于 | 分类于 | 本文总阅读量 次

在使用 vue 做中后台管理系统项目时，我们经常会涉及到权限管理，即对菜单树进行权限控制，由于不同框架本身的一些特性，通常实现权限功能的方式也大不相同。

本文就 vue 项目来介绍一种菜单树的权限管理方式。

前言

对于 vue 项目来说，我们通常会将 菜单树 和 路由表 进行关联，也就是说，最终的菜单树 会根据 完整的路由表 生成。

这里 完整的路由表 可以分为：静态路由 和 动态路由 这两部分。

  • 静态路由

指的是，用户可正常访问的路由，诸如 /login 、/404 、/about 等。这些路由信息不会与菜单树关联。

  • 动态路由

指的是，有对应权限的用户才可以访问，这些路由信息会与菜单树进行关联。

那么，最终的菜单树 又可以如何确定呢？

我们可以借鉴像 vue-element-admin 这样的后台模板框架实现菜单树的思路，对 完整的路由表 中路由对象 hidden 属性为 false 的项作为一个菜单树节点。

1
2
3
4
5
6
7
8
9
[
  {
    name: 'system',
    path: '/system',
    //当设置 true 的时候该路由不会在侧边栏出现 如 401，login等页面，或者如一些编辑页面 /edit/1
    hidden: false,
    component: () => import('@/views/system')
  }
]

资源管理

为了做到对页面菜单项的灵活控制，我们的项目中应该有一个叫做 资源管理 的页面。该页面主要的作用是可以很方便的 新增、修改、删除 一个权限菜单项。

而该资源菜单树的每一个菜单项可以使用一个唯一的 权限编码(code) 与动态路由对象进行关联。

也就是说，后台存储的是一个有 权限编码(code) 信息的菜单树形数据结构，如下所示：

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

const authTree = [
  {
    code: "system_manage",
    name: "系统管理",
    child: [
      {
        code: "system_user_menu",
        name: "用户管理"
      },
      {
        code: "system_role_menu",
        name: "角色管理"
      },
      {
        code: "system_function_menu",
        name: "资源管理"
      }
    ]
  },
  {
    code: "product_manage",
    name: "商品管理",
    child: [
      {
        code: "product_add_menu",
        name: "添加商品"
      },
      {
        code: "product_all_menu",
        name: "所有商品"
      },
      {
        code: "product_attribute_menu",
        name: "属性管理"
      }
    ]
  }
];

如上数据结构所示，code 属性表示该菜单节点的权限编码，name 属性表示该菜单节点的名称，当然，你也可以加入一些其他的可控字段。

动态路由定义

我们已经维护好了一份资源菜单树，那么，接下来的工作就是对每个 权限编码 去定义对应的路由对象信息，这样，我们就可以在后面通过 遍历权限菜单树 去生成一份动态路由表出来。

前端定义的 动态路由 类似于下面这样：

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
const dynamicRoutes = {
  system_manage: {
    name: "systemmanage",
    path: "/systemmanage",
    component: "this is a component load with import() method",
    meta: { title: "系统管理", icon: "iconfont icon-xitongguanli" }
  },
  system_user_menu: {
    name: "usermanage",
    path: "/usermanage",
    component: "this is a component load with import() method",
    meta: { title: "用户管理", icon: "iconfont icon-xitongguanli" }
  },
  system_role_menu: {
    name: "rolemanage",
    path: "/rolemanage",
    component: "this is a component load with import() method",
    meta: { title: "角色管理", icon: "iconfont icon-xitongguanli" }
  },
  system_function_menu: {
    name: "sourcemanage",
    path: "/sourcemanage",
    component: "this is a component load with import() method",
    meta: { title: "资源管理", icon: "iconfont icon-xitongguanli" }
  },
  product_manage: {
    name: "productmanage",
    path: "/productmanage",
    component: "this is a component load with import() method",
    meta: { title: "商品管理", icon: "iconfont icon-xitongguanli" }
  },
  product_add_menu: {
    name: "addproduct",
    path: "/addproduct",
    component: "this is a component load with import() method",
    meta: { title: "添加商品", icon: "iconfont icon-xitongguanli" }
  },
  product_all_menu: {
    name: "allproduct",
    path: "/allproduct",
    component: "this is a component load with import() method",
    meta: { title: "所有商品", icon: "iconfont icon-xitongguanli" }
  },
  product_attribute_menu: {
    name: "attributemanage",
    path: "/attributemanage",
    component: "this is a component load with import() method",
    meta: { title: "属性管理", icon: "iconfont icon-xitongguanli" }
  }
};

根据权限树生成路由表

权限树数据 和 动态路由定义已经处理好了，现在，我们就要根据这两份数据生成 vue-router 可用的路由表数据了。

可以使用如下函数进行生成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 根据权限树生成可用的路由表
function filterMenu(res, authTree, routes) {
  authTree.forEach(v => {
    const routeObj = routes[v.code],
      name = v.name,
      child = v.child;

    if ( name ) routeObj.meta.title = name;

    if (child && child.length > 0) routeObj.children = filterMenu([], child, routes);
    
    res.push(routeObj);
  });

  return res;
}

console.log(filterMenu([], authTree, dynamicRoutes));

插入到路由表中

最后，我们可以使用 addRoutes 方法将生成的路由表数据添加到路由中，这样，路由、权限和菜单就进行了很好的关联，后续对菜单项的控制也会非常方便。

1
2
3
4
5
6
7
8
// ...
import router from '@/router'

// ...

router.addRoutes( routes )

// ...

上面的 routes 就是通过比对权限后生成的路由表数据了。

用户角色管理

通常，我们的权限是绑定到角色的，不同的角色有不同的权限，所以，我们可以在 用户角色管理 模块去绑定对应的菜单权限。

页面如何设计就看你自己了。

动态路由与后台关联的另一种方式

在第一种方式中，当将菜单权限赋予某个角色后，那么，该角色对于的菜单树结构就已经成型了，只不过需要将菜单 权限code 替换为真正的路由对象。再在适合的时机插入到路由表中。

这里还有另一种实现方式。我们将完整的动态路由同步到后台数据库，除了路由对象中的 component 字段变为 String 类型以外，该动态路由没有任务其他特殊之处。

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
[
  {
    name: 'system',
    path: '/system',
    component: 'Layout',
    meta: {
      title: '系统管理',
      icon: 'system-icon',
      roles: ['admin']
    },
    children: [
      {
        name: 'rolesManagement',
        path: 'roles_management',
        component: 'rolesManagement',
        meta: {
          title: '角色管理',
          icon: 'roles-icon',
          roles: ['admin']
        }
      }
      // ...
    ]
  }
]

如上动态路由所示，我们可以看到两个比较特殊的地方，第一个是 component 字段，第二个是 meta 中的 roles 字段。他们有什么意义呢？

component字段

该字段表示路由对象所映射的组件。由于我们需要将整个动态路由表存储到后台数据库，所以，原先的 component 设置方式不再适用，这里我们该用字典关联的方式来解决。我们会有这样一个文件，存储着动态路由中的所有动态组件。

1
2
3
4
5
6
// dynamicRoutesMap.js
export default {
  Layout: () => import('@/layout'),
  rolesManagement: () => import('@/views/system/rolesManagement'),
  // ...
}

roles字段

该字段表示路由对象所关联的角色有哪些。也就是说，只要某个路由对象中的 roles 信息中的角色是当前用户所拥有的，那么该路由对象就该被显示出来。当然，roles 字段是后台动态追加进去的，可在 用户角色管理 页面进行处理。

如何过滤出当前用户有权访问的路由表

获取当前用户信息

我们首先需要获取当前用户信息，即，当前用户拥有的角色信息。

1
2
3
4
5
{
  name: '张三',
  id: 1,
  roles: ['role1', 'role2', 'role3']
}

如上所示，张三 同时拥有 role1、role2 和 role3 这三个角色。

获取动态路由信息

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
[
  {
    name: 'system',
    path: '/system',
    component: 'Layout',
    meta: {
      title: '系统管理',
      icon: 'system-icon',
      roles: ['role1', 'admin']
    },
    children: [
      {
        name: 'rolesManagement',
        path: 'roles_management',
        component: 'rolesManagement',
        meta: {
          title: '角色管理',
          icon: 'roles-icon',
          roles: ['role1', 'admin'']
        }
      },
      {
        name: 'usersManagement',
        path: 'users_management',
        component: 'usersManagement',
        meta: {
          title: '用户管理',
          icon: 'users-icon',
          roles: ['role1', 'admin']
        }
      },
      {
        name: 'resourceManagement',
        path: 'resource_management',
        component: 'resourceManagement',
        meta: {
          title: '资源管理',
          icon: 'resource-icon',
          roles: ['admin']
        }
      },
      // ...
    ]
  }
]

如上所示，这一个经过后台处理的含有完整 roles 信息的动态路由表。每个路由对象都有对应的 roles 信息。表示该路由对象对哪些角色可见。

经过过滤处理后，实际生成的动态路由表示这样的。

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
[
  {
    name: 'system',
    path: '/system',
    component: 'Layout',
    meta: {
      title: '系统管理',
      icon: 'system-icon',
      roles: ['role1', 'admin']
    },
    children: [
      {
        name: 'rolesManagement',
        path: 'roles_management',
        component: 'rolesManagement',
        meta: {
          title: '角色管理',
          icon: 'roles-icon',
          roles: ['role1', 'admin'']
        }
      },
      {
        name: 'usersManagement',
        path: 'users_management',
        component: 'usersManagement',
        meta: {
          title: '用户管理',
          icon: 'users-icon',
          roles: ['role1', 'admin']
        }
      },
      // ...
    ]
  }
]

因为，当前用户没有 admin 角色权限，所以 资源管理 这个路由对象被剔除。

最后，我们依然会使用 addRoutes 方法将生成的 动态路由表 插入到路由表中，菜单树，也会根据动态路由渲染出来。

0%