前端如何控制权限_前端实战——技术篇(三、开发相关): 权限管理_手把手教网络安全技巧

在我们开发任何一个系统时都会涉及到权限的问题，或简单或复杂需要基于业务需求而定。在中后台系统中，特别是比如ERP系统中，权限的设计尤为重要。如果我们的业务需求要求我们的权限控制更为精细，请记住权限的设计应优先于系统设计。接下来我们就来看看如何设计一个完整的权限控制体系。

分层处理

权限上我们以分层的方式分别对视图层、数据层、模型层三个方面控制权限。

1、视图层

视图层我们主要控制的是菜单、按钮、字段、组件等这些页面元素我们是否能够看到, 这层页是我们前端人员主要负责的一层.

一、菜单控制

菜单可以由代码配置好一套完整的路由，也可以增加一个菜单模块由视图配置完整路由，各有各的好处，但并不影响我们对权限的处理。

1、配置动态路由，从后端获取菜单路由配置后与本地路由合并生成新路由并渲染。

2、添加路由守卫，在路由跳转之前对要跳转的路由进行权限校验。

3、设置白名单，对于登录页、404页面等不做权限。

二、字段控制

字段的控制主要表现在表格和表单中。

1、配置动态表格列，本地先配置完整的表格列，再根据当前用户配置的字段进行过滤。

2、自定义指令，通过自定义指令对表单中的字段显示进行控制。需要注意不同权限组合对视图布局的影响。

三、关于接口和按钮的控制

大部分的项目在接口上只做了“是否登录”权限校验, 而当我们对不同的角色要限制不同的操作等级时就要更为精细的权限处理。而较为细致的权限控制, 是需要我们控制到接口一层的, 因为我们所有的业务操作都对应着一个接口, 所以从接口级别控制更为有效的管理我们的权限。

控制接口权限的同时也就等同于控制了按钮的权限，视图上的一些显示控制只是为了提升我们项目的用户体验, 防止用户能看到按钮也能点击, 但点击后又出现没有操作权限的尴尬情况。

1、自定义指令，通过接口权限判断控制按钮显示或是否可操作。

2、接口拦截，在接口处再次进行拦截校验。

3、后端校验，仅仅是视图上的控制肯定是不够安全的, 因此这个控制不仅前端要做，后端也要做。

4、白名单，在做权限过滤时要同时考虑到部分接口是不需要权限的, 如登录、退出等。

四、组件控制

组件级别的权限控制需求不多，不过也存在，如果需要对组件进行权限控制可以封装一个组件来处理。

2、数据层

数据层我们主要控制的是当前用户可以访问的数据范围，例如张三只能看到他自己创建的数据,李四只能看到项目一的数据等...

数据层的权限既可以是基于用户配置的，也可以是根据角色配置。通过这两个配置的范围与当前数据进行比对，如果数据处在这个范围内则对该条数据有权限。

函数

在配置数据规则之前我们先了解一下如何来书写一个规则。

一个基础的规则应该包含三部分，A字段、判断条件、B字段。这与过滤条件十分类似，而其也确实可以作为过滤条件使用。

举例

以当前用户创建数据为例

可以写成: ('user.id', '=', 'item.')

代表当前用户的id字段如果等于当前数据的字段，则权限正确。

值

两端的值，既可以是布尔、数字、字符串、数组等常规值，也可以是一个字符串的索引值，类似于vue模板中的字符串，如果是后者的话需要进行解析操作。

操作符

这中间的操作符，如下表所示

符号说明

=,>.=,, 10)]

上述表达式表示当前用户名为张三且用户年龄大于10岁，则拥有权限。

你会发现，这不同于我们平常使用的逻辑判断方法，&符号被放到了最前面，这采用的是波兰表示法。简单来说，波兰表示法是一种操作符置于操作数前，并且不需要括号仍然能无歧义地解析表达的方法。

数据权限的配置

数据权限的判断需要按照不同的维度来进行，这个维度可以是创建人、角色、状态等等...

例如，我们以角色维度来说，要配置当前数据只有A角色可以看到，应该如何配置这个权限呢？

1、模型的数据权限处配置，只有A角色可以看到。

[('user.user_roles', 'in', 'A角色')]

2、为用户赋予A角色。

这样，我们在进行权限过滤时就可以判断用户上配置的字段中是否包含A角色来确定是否拥有权限。

3、模型层

该层几乎不需要前端关心。

模型层限制的是当前用户对该数据库表是否有操作权限, 是偏底层的控制, 可以从源头提升权限管理的安全性, 但由于对模型层的控制容易与视图层的一些权限冲突, 或与业务操作逻辑冲突, 故而需要综合考虑是否对模型层限制, 此外如果发生冲突时, 在后端业务逻辑中可以使用“提权”方案, 提升至超级管理员跳过权限编写业务代码。

角色管理

在权限管理中，角色是一种将权限集中在一起并分配给用户或用户组的抽象概念。角色通常代表了系统中的不同职责或权限级别，可以根据用户的角色来确定其在系统中的操作权限。

除了自定义的角色外，每个系统都需要一个管理员、超级管理员。

管理员 拥有全系统的访问权限, 全部的数据权限。

超级管理员 拥有全系统的访问权限，系统配置数据的修改权限，可以供开发人员使用。（可以没有任何数据权限）

单个角色的权限配置权限配置示例

首先思考一个问题：我们应该怎么设计这个配置项？

❌按视图

按视图大小层级进行划分，菜单作为根节点，每个页面中的所有元素都配置在其下面。

接口数据权限菜单二菜单三

这样的话权限的配置似乎更清晰一些，但也存在一些问题：

✅按模型

接口字段数据权限

模型二

相比之下，按模型来划分就显得更为清晰，也更便于维护。因此我们也按照这个模式来进行权限划分。

是否允许多角色

在设计之初就要想好，你的项目是否需要允许多角色的存在，实际情况中也确实存在一人身兼两职的情况。

另外，如果两个角色的权限产生了冲突，那么我们优先选择取两个权限的并集。如果选择交集的话会让权限的配置变得十分复杂，也会出现许多冲突的权限最后甚至不得不扩大角色本身的权限，因此并集优于交集。

关于临时授权、权限交接

我们思考一个这样的业务场景，假如员工A突然有事，要请假一周，或者直接离职了，而数据权限是根据当前数据的创建人进行过滤的，那么这个时候我们应该怎样让员工B来接手员工A未完成的数据呢？

一种比较简单的做法就是直接让员工B拿着员工A的账号继续完成剩下的工作。当然这样并不友好。

另一种方法则是，我们在创建数据的时候除了固定的创建人、创建时间外，增加一个固定的数据拥有人字段，来等效替代创建人，同时这个数据是可以修改的，当用户离职之后有专门的接口可以选定交接对象，并将其相关的字段修改掉，这样就实现了权限的交接。

或者在进行对比时，你可以不与用户本身的信息做对比，而是将条件绑定到用户的一个字段属性上，这个字段包含了一个用户的数组，代表这些人的数据访问权限当前用户都可以拥有。

总结

以上内容基本已经可以构成一套完整的权限体系，虽然没有具体的实现代码，但给出了整体的思路，具体的实现还是要结合自身的业务需求来选择性的实现，一切都以业务为主。同时也没有必要过于苛求权限的精度，精度越高就实现就越复杂，配置成本也会增加许多。

网络安全学习路线图（思维导图）

网络安全学习路线图可以是一个有助于你规划学习进程的工具。你可以在思维导图上列出不同的主题和技能，然后按照逻辑顺序逐步学习和掌握它们。这可以帮助你更清晰地了解自己的学习进展和下一步计划。

1. 网络安全视频资料

2. 网络安全笔记/面试题

3. 网安电子书PDF资料

~