Web 背景项目，权限如何定义、设置、利用：菜单权限、按钮权限 ts element-
Web 背景项目，权限如何定义、设置、利用：菜单权限、按钮权限 ts element-ui-Plus做一个背景管理项目，里面必要用到权限管理。这里说一下权限定义的大概，代码不多，主要讲原理和如何实现它。
一、权限管理的原理
权限管理分三个部分：
[*]接口的访问权限：
这个背景去做就好了，前边只必要配置。
[*]菜单的访问权限，展示给特定用户的菜单是哪样的
这个必要前端设置，背景再返给你过滤后的菜单。
[*]界面中的一些操作按钮
这个是跟菜单走的，必要前端在界面的每个操作按钮上添加 v-if 判断，这里的权限就是个字符串。一个自定义的表示的字符串，用户有这个字符串就表现，没有就不表现。
这些权限是定义在脚色上的，再给用户分配一些特定的脚色即可。
https://i-blog.csdnimg.cn/blog_migrate/f49823d14da0d0c28f49a6b4780f94e8.png
二、实现
1. 接口权限
后端去实现，前端只必要提示可设置的操作流程即可
这里可以用 el-transfer 插件举行操作，会比较方便
https://i-blog.csdnimg.cn/blog_migrate/4108a14217e27ff7b1c1cd2a955e275e.png
2. 菜单权限
菜单权限只必要编辑哪些菜单可见就行。
https://i-blog.csdnimg.cn/blog_migrate/ba107caf9008e36bdb75a878e7a1e9d7.png
3. 按钮权限
按钮权限是这里面比较贫苦的，但也不是很贫苦。
首先你必要在菜单定义中添加这个按钮，并添加这个按钮的权限标识，
比如 user:btn:add 表示 User 列表中的添加按钮，这个标识你可以随心定义，尽可能的简朴且表义。
https://i-blog.csdnimg.cn/blog_migrate/e9d40648a688590d979a8e3e9a4a12e2.png
用户组设置菜单权限的时候也同步设置按钮权限
https://i-blog.csdnimg.cn/blog_migrate/c8540feb6fa41cbeb3d3ed49346a1538.png
在页面中判断按钮是不是表现：
[*]从登录后的菜单列表中获取所有的标识字符串列表，制作成 set 好供背面利用。
/**
* 递归获取所有菜单权限
* @param menuTree
* @return Array<string>
*/
function getPermissionArrayFromMenuTree(menuTree: Array<MenuEntity>): Array<string>{
let tempPermissionArray: Array<string> = []
menuTree.forEach(item => {
if (item.children?.length > 0){
tempPermissionArray = tempPermissionArray.concat( getPermissionArrayFromMenuTree(item.children))
} else {
if (item.perm) tempPermissionArray.push(item.perm)
}
})
return tempPermissionArray
}
// 通过上面的方法获取到所有权限数组后，把它弄成 set，放到 store 中供后续使用
// 这个操作一般在登录后，或者在页面刷新后
storeProject.permissionSet = new Set(getPermissionArrayFromMenuTree(res))
[*] 定义一个 enum 方便后续举行判断
将所有在菜单中设置的权限字符串都设置成：笔墨-权限字符串 的 Enum
https://i-blog.csdnimg.cn/blog_migrate/e1538021fbc7036e654f0a9f0710a4ba.png
[*] 页面中利用权限判断这个按钮该不该表现
<el-button
v-if="storeProject.permissionSet.has(EnumPermissions['员工:按钮:添加'])"
type="success" icon="Plus" @click="addUser()">添加</el-button>
如许就能看到上面定义成 enum 的好处了，你不必要记那些权限标识。
https://i-blog.csdnimg.cn/blog_migrate/bcbcd2c24e335a8622df8134be5a9b85.png
三、完成
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]