如何优雅地在vue中添加权限控制示例详解

前言

在一个项目中，一些功能会涉及到重要的数据管理，为了确保数据的安全，我们会在项目中加入权限来限制每个用户的操作。作为前端，我们要做的是配合后端给到的权限数据，做页面上的各种各样的限制。

需求

因为这是一个工作上的业务需求，所以对于我来说主要有两个地方需要进行权限控制。

第一个是侧边菜单栏，需要控制显示与隐藏。

第二个就是页面内的各个按钮，弹窗等。

流程

1、如何获取用户权限？

后端（当前用户拥有的权限列表）-> 前端（通过后端的接口获取到，下文中我们把当前用户的权限列表叫做 permissionList）

2、前端如何做限制？

通过产品的需求，在项目中进行权限点的配置，然后通过 permissionList 寻找是否有配置的权限点，有就显示，没有就不显示。

3、然后呢？

没了。

当我刚开始接到这个需求的时候就是这么想的，这有什么难的，不就获取 permissionList 然后判断就可以了嘛。后来我才发现真正的需求远比我想象的复杂。

真正的问题

上面的需求有提到我们主要解决两个问题，侧边菜单栏的显示 & 页面内操作。

假设我们有这样一个路由的设置（以下只是一个例子）：

import VueRouter from 'vue-router'/* 注意：以下配置仅为部分配置，并且省去了 component 的配置 */export const routes = [ { path: '/', name: 'Admin', label: '首页' }, { path: '/user', name: 'User', label: '用户', redirect: { name: 'UserList' }, children: [ { path: 'list', name: 'UserList', label: '用户列表' }, { path: 'group', name: 'UserGroup', label: '用户组', redirect: { name: 'UserGroupList' }, children: [ { path: 'list', name: 'UserGroupList', label: '用户组列表' }, { path: 'config', name: 'UserGroupConfig', label: '用户组设置' } ] } ] }, { path: '/setting', name: 'Setting', label: '系统设置' }, { path: '/login', name: 'Login', label: '登录' }]const router = new VueRouter({ routes})export default router

其中前两级路由会显示在侧边栏中，第三级就不会显示在侧边栏中了。

页面内操作的权限设置不需要考虑很多其他东西，我们主要针对侧边栏以及路由进行问题的分析，通过分析，主要有以下几个问题：

什么时候获取 permissionList，如何存储 permissionList 子路由全都没权限时不应该显示本身（例：当用户列表和用户组都没有权限时，用户也不应该显示在侧边栏） 默认重定向的路由没有权限时，应寻找 children 中有权限的一项重定向（例：用户路由重定向到用户列表路由，若用户列表没有权限，则应该重定向到用户组路由） 当用户直接输入没有权限的 url 时需要跳转到没有权限的页面或其他操作。（路由限制）