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

前言

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

新建用户权限鉴定工具

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

路由router设置

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

{
	path:'/',
  name:'form',
    meta:{authority:["admin"]}
  }
1
2
3
4
5

路由守卫设置

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

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
3
4
5
6
7
8
9
10
11
12
13
14
15

增删改查权限控制

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

权限组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

应用代码如下

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

1
2
3

创建指令来控制权限

创一个一个文件夹专门存放指令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};
1
2
3
4
5
6
7
8
9
10
11
12

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

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

总结

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