标签：vue 页面 用户 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":{
"admin":["Home","Result","List","Login","NoPermission","Success"],
"user": ["Home","Login","NoPermission","Success"]
}
//...省略
- login.vue
登录成功后根据角色获取对应的权限列表，并保存到vuex和localStorage中
//...省略
const login = () =>{
http.get('/data.json').then(res=>{
let roleList = [];
roleList = state.role === 1 ? res.permissions.admin : res.permissions.user;
localStorage.setItem(constants.UserInfo, JSON.stringify({name:state.name || "YANNIS", role: roleList}));
store.commit(constants.SetUserInfo, JSON.stringify({name:state.name || "YANNIS", role: roleList}));
//...省略
});
}
//...省略
- HomePage.vue
根据不同角色对应的权限控制菜单的展示与隐藏
<!--HomePage.vue-->
<el-menu-item index="/list" v-show="$store.state.userInfo.role && $store.state.userInfo.role.includes('List')">
</el-menu-item>
- NoPermission.vue
新增权限提示页面，当用户没有权限访问对应的页面时，则直接跳转到该页面给出友好的提示。
<template>
抱歉，您没有权限访问该页面！！！
</template>
- success.vue
新增问卷提交成功提示页面，当用户填写完问卷提交成功后会跳转到该页面，提示用户问卷已提交成功
<template>
您的问卷已经提交，感谢您的参与！！！
</template>
- router/index.js
在路由配置文件中为新增的两个页面（NoPermission.vue和success.vue）添加路由配置信息。同时在路由导航守卫中根据用户角色来控制页面访问权限。
const routes = [
//...省略
{
path:'/noPermission',
name:'NoPermission',
component:()=>import(/*webpackChunkName: "NoPermission"*/ '../noPermission.vue')
},
{
path:'/success',
name:'Success',
component:()=>import(/*webpackChunkName: "Success"*/ '../success.vue')
}
]
//...省略
router.beforeEach((to,from, next)=>{
const token = localStorage.getItem(constants.Token);
if(token || to.name === "Login"){
let user = localStorage.getItem(constants.UserInfo);
const roleList = user ? JSON.parse(user).role : [];
if(to.name === "Login" || (roleList.length && roleList.includes(to.name))){
next()
}else{
next('/noPermission')
}
}else{
next()
}
})
- Home.vue
修改问卷提交的submit方法，将原来提交成功后跳转到问卷详情页面改为跳转到提交成功的提示页面
const submit = () => {
// ...省略
router.push('/success')
}
到此一个完整的权限控制就实现了，下面来看一下效果图：
- 普通用户或匿名用户登录
- 管理员登录
- 要访问的目标页面没有权限
- 问卷提交成功
总结
本次分享，我们对问卷系统又进行了进一步的完善，添加了权限控制，并实现了从菜单和路由层面两个角度进行控制，以实现尽量安全的权限控制功能。到此本系列关于问卷系统的分享就基本已经实现了，从最初的简单投票功能到现在的一个小型问卷系统，尽管系统很小很简单但也涉及到了很多的知识点。最后也希望本系列的分享能够帮助到大家。
另外：在本问卷系统在最初设计的时候还有考虑添加一个后台管理功能：即管理员可在页面进行各种问卷主题的配置。这个后期也会视情况补齐。感兴趣的小伙伴也可以自行实现一下。
本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！需要源码的小伙伴也可以在下方留言获取！
标签：vue,页面,用户,Vue3.0,长文,权限,千字,路由,问卷 来源： https://blog.csdn.net/lixiaosenlin/article/details/121613528
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。