前言：
如何去设计一个完整清晰且灵活的权限是后台系统的关键所在，在配置完基本的开发环境之后，将该权限设计加入进去之后，后面的开发就是水到渠成。在开发时，大家肯定对菜单管理，角色管理和用户管理很熟悉，但是对其中的相关性可能了解的不够，本文就参考人人微服务平台（账号密码：admin/admin）及若依管理系统（账号密码：admin/admin123）的权限设计，来进行权限设计方案的说明，希望对大家梳理权限设计方面有帮助。
权限设置肯定绕不开菜单管理，角色管理和用户管理，部门管理和岗位管理就看业务需要。本文就从这几块进行讲解和理清他们之间的关系。
1.菜单管理
是什么：菜单管理的表格中：包含了路由和按钮合成在一块组成了整体的菜单
有什么用：前端的所有需要权限控制的页面和按钮都在这里，用于前端增加页面以及增加页面按钮标识。
2.角色管理
是什么：角色管理就是对于页面进行分配的东西。上面的菜单管理是所有的页面都有，但是某些角色是不应该有所有页面的，所以我们需要有角色和页面的一对一关系。比如超级管理员角色有所有的页面，但是普通用户角色，只有左侧的某几个菜单。
有什么用：用于添加新用户，角色不同时，所对应的菜单也不同。
3.用户管理
是什么：用户管理是给到用户使用的账号密码等，刚才说了角色管理是对应了不同的页面，而用户管理则需要和角色管理相对应，让不同用户的角色权限不一致，从而实现每个用户的权限不一致。这里指的是用户和权限的多对一关系：指的是多个用户可以对应一个角色。比如张三和李四，都可以有普通用户的权限，而王五，则可以分配有超级管理员的权限。
有什么用：主要用于新增用户并同时配置角色，配置部门，配置岗位
4.部门管理
这个和权限不挂钩，主要就是为了展示公司的组织架构，后续可以在前台使用这个架构
5.岗位管理
这个和权限也不挂钩，主要就是用于展示用户的岗位信息
通用的代码实现逻辑
登录成功之后一般这几个接口是必须会有的，我们重点需要对路由信息接口和权限标识接口进行处理来实现权限控制。
接口1（拿token）：登录成功之后拿到token，后续的请求都需要携带上token，让后台知道你是谁
接口2（拿用户信息）：一般就是基础的用户信息。有些后台也会把接口4的授权标识也塞到这里面
接口3（拿权限路由表）：拿到不同用户的路由信息，并进行拼装成前端可用的路由信息，然后使用addRoutes将路由加到前端路由表中，实现不同用户对应页面的有无
接口4（拿按钮的授权标识）：拿到按钮的授权标识，存入到vuex中，并且写一个自定义权限指令来控制按钮的有无。
自定义指令：
import store from '@/store/'
import Vue from 'vue'
Vue.directive('permission', {
inserted (el, binding) {
const permission = binding.value; // 获取权限值
const have_permissions = store.state.Common.permissionsArray
if (!have_permissions.includes(permission)) {
el.parentElement.removeChild(el); //不拥有该权限移除dom元素
}
},
});
在main.js中导入
import '@/directives/permission.js'
使用：
其他：
这里主要是讲解了一下如何进行权限设计的思路，便于开发理解。具体的实现步骤请看往期：
前端动态路由怎么实现的：https://blog.csdn.net/weixin_43239880/article/details/129922664?spm=1001.2014.3001.5501