Vue用户鉴权（权限指令与权限组件的设置思想）

前言

vue用户鉴权如何处理，该页面用户是否可以访问？不同权限用户应该只允许访问归属于角色的权限页面

新建用户权限鉴定工具

在根目录中中新建utils文件夹，该文件夹一般存放一些工具类js文件，新建auth.js文件作为用户鉴权工具类，书写代码

路由router设置

设置meta中的authority熟悉选择什么角色权限可以访问该组件，例如

{
	path:'/',
  name:'form',
    meta:{authority:["admin"]}
  }

路由守卫设置

设置了路径权限也要在路由守卫中进行判断

router.beforEach((to,from,next)=>{
  //我使用lodash包
  const record = lodash.findLast(to.matched, record.meta.authority)
  if(record && 你工具中写的权限获取方法的返回值相同){
    if(！是否已经登录 !== '/user/login'){
      next({
        path:'user/login'
      })else if(){
      next({
        path:'/403'
      })
      }
    }
  }
})

增删改查权限控制

有两种方式
1.新建一个权限控制组件，全局引用后进行组件嵌套使用
2.创建一个指令，这样就不需要进行嵌套就可以验证权限

权限组件

<script>
  import {check} from "../utils/auth"
  export default{
    functional: true,
    props:{
      // 给组件传递行营的authority值例如admin,user
      authority:{
        type:Arry,
        required: true
      }
    },
    render(h,context){
      const {props,scopedSlots} = context;
      //验证时管理员还是普通用户如果验证正确显示包含的组件如果延时失败显示null
      return untils中验证权限的函数？scopedSlots.default():null;
    }
  }
</script>

在其他组件中应用该组件，应用之前记得在main.js中进行全局注册

应用代码如下

<权限组件 ：authority=['admin']>
	<想要控制的组件>
</权限组件>

创建指令来控制权限

创一个一个文件夹专门存放指令directives,专门存放指令的文件夹
创建一个suth.js文件

function install(Vue,options = {}){
  // 给这个指令可以指定名称若没有指定名称则使用auth
  Vue.directive(options.name || "auth",{
    inserted(el,binding){
      if(!check(binding.value)){
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  });
}

  export default {inserted};

使用之前去Vue全局注册，使用Vue.use()
在其他组件中使用该指令

<某组件 v-auth="['admin']">
// 直接使用v-auth放入你的权限名称即可

总结

但是指令权限时有弊端的，因为只能进行识别一次，如果权限时动态的就不能进行识别，但是组件的权限验证就可以避免这个问题