Vue项目实现简单的权限控制管理功能
在Vue项目中实现权限控制管理
对于一般稍大一些的后台管理系统，往往有很多个人员需要使用，而不同的人员也对应了不同的权限系统，后端的权限校验保障了系统的安全性，而前端的权限校验则提供了优秀的交互体验。
校验方式
前端对用户的权限信息进行校验往往在两个方面进行限制
- 路由不可见
- 元素不可见
通过以上两个方式，来将用户权限之外的内容隐藏掉。
路由不可见实现方法
在router.js中的meta字段中加入该路由的访问权限列表
{
path: 'edit',
name: 'edit',
meta: {
title: '编辑账户',
auths:['edit_account']
},
component: () => import('pathToComponent/component.vue'),
},
Vue.router中提供了导航守卫，我们这里使用 全局前置守卫 对路由跳转进行权限校验
router.beforeEach(to,from,next)
参数 to 是即将进入的路由对象，我们可以在对象中拿到之前在router.js中定义的 route 对象，并获得 auths 字段
router.beforeEach((to,from,next)=>{
const hasAuth = function(needAuths，haveAuths){ //判断用户是否拥有权限的function
// implement
}
const havaAuths = []; // 用户拥有的权限列表
if(!hasAuth(to.meta.auths,haveAuths)){
//没有权限重定位到其他页面，往往是401页面
next({replace:true,name:'otherRouteName'})
}
//权限校验通过,跳转至对应路由
next();
})
在有侧边栏的后台管理中，还需要对侧边栏的路由导航进行隐藏，这里同样是通过拿到 route.meta.auths 字段进行过滤。
元素不可见实现方法
因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。前端通过控制元素的展示来隐藏掉用户不具有权限的元素，避免点击了某一个button导致接口401报错这样不友好的交互体验。
全局注册一个directive, directive官网介绍 。
//acl.js
const aclDirective = {
inserted:function(el,binding){ // 在被绑定的元素插入到dom中时
const hasAuth = function(needAuths，haveAuths){ //判断用户是否拥有权限的function
// implement
}
const havaAuths = []; // 用户拥有的权限列表
if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以获得绑定指令时传入的参数
el.style = "display:none"; //修改元素的可见状态
}
}
}
//main.js
Vue.directive('acl',aclDirective); //全局注册指令
在需要控制显示的组件上我们就可以通过 v-acl 进行权限控制
<button v-acl="['edit_access']">编辑账户</button>
总结
以上所述是小编给大家介绍的Vue项目实现简单的权限控制管理功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了vue.js 实现点击div标签时改变样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue.js实现条件渲染的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了Vue.js手风琴菜单组件开发实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vue服务端渲染操作,结合简单实例形式分析了vue.js服务端渲染操作的原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于Vue实现关联页面多级跳转（页面下钻）功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Vue关于对象直接赋值的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下2016-05-05
Vue引入使用localforage改进本地离线存储方式(突破5M限制)
这篇文章主要介绍了Vue引入使用localforage改进本地离线存储方式(突破5M限制),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题
mock.js:是一款模拟数据生成器,可以生成随机数据,拦截 Ajax 请求,使用mockjs模拟后端接口,可随机生成所需数据,模拟对数据的增删改查,本文给大家介绍了Vue3解决Mockjs引入后并访问404(Not Found) 的页面报错问题,需要的朋友可以参考下2025-04-04
最新评论