前端做页面权限管理功能

前端做页面权限
整理一下自己前端做角色权限的思路吧

首先想的肯定就是需要一个角色权限的表格，目前的权限主流都是三权分立，也就是查看编辑删除三个权限。

然后通过这个表格的数据可能是id 或者说是 其他形式（基本都是id。避免页面name 重复问题）

来去更改对于（菜单表）的渲染，当然这里面肯定会有需求是这样的，比如说：某某页面只有超管才能看到，某某页面不需要设置权限所有人都能看。

这些问题都很简单，让后端反给你的数据里要返回对应页面的id就好了, 只要有这个id 你就渲染，比如超管才能看，那就是超管才有这个id 所有人都能看的话，那就是所有人都有这个权限的id的啦

有一些比较深层次的页面，可能不会配在权限列表里

这里可以举例： 比如你有用户的编辑权限，但是你的编辑页面在另外一个页面中，而且这个页面并不在菜单表中只在路由表里，这个时候你就要做一些特殊处理了。
还需要设置一步，或者说和产品设计有关了，那就是如果用户啥权限没有，类似于临时用户要放到哪里呢，那当然就是放到刚才说的，所有人都能看到的页面了，比如个人信息等等。

这些都想通以后，你会发现还剩下三个问题，第一就是前端维护角色表的数据结构问题，你需要根据这个角色来渲染你的角色表，比较麻烦的就是数据联动的问题，比如你把某一个一级菜单下面的二级菜单的权限都关了，那肯定就要联动把一级菜单的权限也取消掉。我采用的数据结构是这样的

data = [

{

id: 1,

title: "1",

children: [

{

id: 10,

title: "10",
}

]

有children说明没有下一级的菜单了， 通过这种来去渲染你的角色表，一堆checkbox让用户去勾选的那种，这里id需要有一定的关系，比如一级菜单就一位id。二级菜单两位啊这种的，如果一级菜单超过十个，你就可以一级菜单两位id 二级菜单三位这种的。。。

第一步痛苦到这里就结束了，第二部来了，如何联动

这里根本讲不开，如果有朋友需要可以留言，讨论一下

举例几个问题，比如说 二级全都取消时将一级取消

三级取消以后将二级都取消，如果有四级菜单甚至五级，那简直就是噩梦，建议研究一下reduce 我的话只有三级，所以我就遍历两次就好了。

最后就是和router匹配上 去渲染对应的菜单表了，还有就是你需要判断，如果用户去到了一个菜单表里没有的页面，他是有权限的还是没有，没有权限你要跳转回去。

如何在进入页面进入的时候判断一下是不是有权限呢，可以封装一个函数 输入三个权限，del ，edit 和see  然后再次和权限表同时循环几次，然后变成这个函数的返回结果，放到页面中的状态里去，通过状态控制编辑等按钮显示隐藏。

emm 暂时说这么多，有想沟通的，可以私信我哈，改天在补充一下具体的代码。也不知道什么时候有什么，不过私信我会看的。