【Vue3.0实战逐步深入系列】为问卷系统添加权限控制功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。上篇文章中我们为问卷系统进行重新布局以及添加了用户登录功能，并且在用户登录时可以选择不同的角色进行登录。但是不管是什么角色（包括匿名）登录进来后显示的权限都是一样的，即只要登录不管是什么角色都能看到所有的菜单及所有的页面功能，这显然是不合理的，作为一个系统就应该为不同角色分配不同的权限，比如管理员权限最大可以看到所有的页面，而普通用户和匿名用户则只能进行问卷填写，对于其它页面则是没有权限的。那么接下来就为我们的系统添加权限校验功能。

简单的权限控制

在前面登录功能中，当用户登录成功后我们已经将用户对应的角色保存到了vuex和本地存储localStorage中，那么最简单的方式就是在菜单渲染的时候进行用户角色判断，然后来决定该用户是否有权限访问该菜单：

• 修改HomePage.vue组件，找到菜单中的**“提交记录”**菜单
• 给提交记录菜单添加v-show属性：值为 $store.state.userInfo.role === 1 意思就是当用户角色为管理员时显示该菜单

修改后的代码如下：

<!--HomePage.vue-->
<el-menu-item index="/list" v-show="$store.state.userInfo.role === 1">
</el-menu-item>

这时当我们再次重新以不同的角色登录我们的系统时，就会根据不同的角色展示不同的菜单，比如普通用户和匿名用户只能看到【问卷填写】菜单，而管理员用户就能看到所有的菜单。看似权限控制已经实现了，然而这并不是最终版本，因为这样来控制权限是由瑕疵的。比如，如果用户知道了你的路由，那么他就可以直接通过路由来访问对应的页面，而根本不需要通过点击菜单跳转。因此我们还需要对权限控制进一步完善。

最终版权限控制

• 基于上述问题，除了对菜单进行控制外，我们还得对路由也要做权限控制，这将又会用到我们的路由导航守卫了，没错就是在路由导航守卫中进行角色和路由的校验，如果当前用户对要访问的路由有权限那么就允许访问，否则就跳转到权限不足的提示页面。
• 那么还有个问题，目前我们保存的角色只是一个数字，这时要进行角色和路由的判断是比较麻烦的，（比如：if(role === 1 && (to.name === ‘Login’ || to.name === “Home” || to.name === “List”))），目前只有几个路由还好，但是如果随着系统的变大，路由也会越来越多，这个时候就不得不写一堆的或者了。为了解决这个问题，我们现在不存具体角色了，而是把角色所拥有的权限进行保存，即：当前角色拥有哪些页面权限就把这些页面对应的路由保存起来，根据这些路由再进行判断就方便的多了。下面我们看下具体实现步骤：
• 1.修改data.json文件，添加不同角色的权限列表
• 2.修改登录页面的登录功能
  • 在login.vue的login方法中通过axios请求data.json文件
  • 根据不同的角色取出对应的权限列表并保存到vuex和localStorage中
• 3.修改HomePage.vue的【提交记录】菜单的v-show属性，将原来的值改为 $store.state.userInfo.role.includes(‘List’)
• 4.修改路由导航守卫，如果要访问的页面路由存在于权限列表中则允许访问，否则禁止访问。
• 5.添加一个NoPermission.vue页面，当用户要访问的页面没有权限是则应该跳转到该页面给出提示
• 6.另外设置了权限后：作为普通用户和匿名用户只有【问卷填写】的权限了，而我们之前的功能中，当用户填写完问卷后会自动跳转到问卷详情页面，而问卷详情页面又没有访问权限这时就会跳转到没有权限的提示页面NoPermission.vue，这显然也是不够友好的，用户填完问卷却提示没有权限，会让用户一脸懵逼。因此我们需要再添加一个成功的提示页面success.vue，当用户填完问卷后直接跳转到成功提示的页面。这里需要修改Home.vue中的submit方法

• data.json

//...省略
//新增
"permissions":{