在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作,作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制。
因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制。
第一个是侧边菜单栏,需要控制显示与隐藏。
第二个就是页面内的各个按钮,弹窗等。
1,如何获取用户权限?
后端(当前用户拥有的权限列表)→前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做permissionList)
2,前端如何做限制?
通过产品的需求,在项目中进行权限点的配置,然后通过permissionList寻找是否有配置的权限点,有就显示,没有就不显示。
3,然后呢?
没了。
当我刚开始接到这个需求的时候就是这么想的,这有什么难的,不就获取permissionList然后判断就可以了嘛。后来我才发现真正的需求远比我想象的复杂。
上面的需求有提到我们主要解决两个问题,侧边菜单栏的显示,页面内操作。
假设我们有这样一个路由的设置(以下只是一个例子):
其中前两级路由会显示在侧边栏中,第三级就不会显示在侧边栏中了。
页面内操作的权限设置不需要考虑很多其他东西,我们主要针对侧边栏以及路由进行问题的分析,通过分析,主要有以下几个问题:
-
<李>什么时候获取permissionList,如何存储permissionList李
<李>子路由全都没权限时不应该显示本身(例:当用户列表和用户组都没有权限时,用户也不应该显示在侧边栏)
<李>默认重定向的路由没有权限时,应寻找孩子中有权限的一项重定向(例:用户路由重定向到用户列表路由,若用户列表没有权限,则应该重定向到用户组路由)
<李>当用户直接输入没有权限的url时需要跳转到没有权限的页面或其他操作。(路由限制)
下面我们针对以上问题一个一个解决。
<强>什么时候获取权限,存储在哪,路由限制
我这里是在路由器的beforeEach中获取的,获取的permissionList是存放在vuex中。
原因是考虑到要做路由的限制,以及方便后面项目中对权限列表的使用,以下是实现的示例:
首先我们加入权限配置到路由器上:
