Vue项目中实现权限控制管理对于一般比较大的后台管理系统，往往需要使用的人很多，不同的人员也对应??不同的权限系统。权限校验保证了系统的安全性，前端权限校验提供了极好的交互体验。验证方式前端对用户的权限信息进行验证，往往会在两个方面进行限制。路由是不可见的，元素是不可见的。通过以上两种方式，隐藏用户权限之外的内容。路由不可见的实现方法是将路由的访问权限列表auths字段添加到router.js中的meta字段中。{path:'edit',name:'edit',meta:{title:'editaccount',auths:['edit_account']},component:()=>import('pathToComponent/component.vue'),},Vue.router提供导航守卫。这里我们使用全局pre-guards来验证路由跳转的权限。router.beforeEach(to,from,next)的参数to是要进入的路由对象。进入之前在router.js中定义的route对象，获取auths字段router.beforeEach((to,from,next)=>{consthasAuth=function(needAuths,haveAuths){//判断用户是否拥有的函数authority//implement}consthavaAuths=[];//用户拥有的权限列表if(!hasAuth(to.meta.auths,haveAuths)){//没有权限迁移到其他页面，经常是401页面next({replace:true,name:'otherRouteName'})}//权限验证通过，跳转到对应路由next();})在后台管理有侧边栏的，也需要隐藏侧边栏的路由导航，这里它还通过获取route.meta.auths字段进行过滤。elementinvisible的实现方式是因为一些特殊的接口调用或者数据展示在某些页面中是受权限控制的。前端控制元素的显示，隐藏用户没有权限的元素，避免点击某个按钮导致界面401错误的不友好交互体验。全局注册一个指令。//acl.jsconstaclDirective={inserted:function(el,binding){//当绑定元素插入dom时，consthasAuth=function(needAuths,haveAuths){//判断用户是否有权限的函数//实现}consthavaAuths=[];//用户拥有的权限列表if(!hasAuth(binding.value,haveAuths)){//binding.value可以获取绑定命令时传入的参数el.style="display:none";//修改元素的可见状态}}}//main.jsVue.directive('acl',aclDirective);//全局注册指令可以在需要控制显示的组件上通过v-acl授权Control
