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优化之优雅的抛出错误(Error)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue.js中observer模块的相关资料，文中通过原理分析介绍还是相对的详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-02-02
基于elementUI使用v-model实现经纬度输入的vue组件
这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
vue中的el-tree @node-click传自定义参数
这篇文章主要介绍了vue中的el-tree @node-click传自定义参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了vue树形控件tree的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
详解如何使用Object.defineProperty实现简易的vue功能
这篇文章主要为大家介绍了如何使用Object.defineProperty实现简易的vue功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况
这篇文章主要介绍了vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue3+TypeScript封装axios并进行请求调用的实现
这篇文章主要介绍了Vue3+TypeScript封装axios并进行请求调用的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-09-09
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论