木灵鱼儿

木灵鱼儿

阅读:518

最后更新:2020/12/06/ 19:00:38

更加精细化的权限设计(权限组件、权限指令)

路由的鉴权只能处理大的方面,而更精细度的权限控制,就做不到了,如果我页面有一些按钮是需要有权限才能显示,那么,单路由鉴权根本无法做到。

所以我们还需要更加精细化的权限控制。

这里有两种权限的控制方式:

  1. 权限组件
  2. 权限指令

权限组件

权限组件可以理解为一个插槽组件,这个组件自身做一个权限判断,如果有权限我们就允许这个插槽内容展示。

但是这么一个小小的功能其实也没必要做做一个传统组件,使用函数式组件他的性能会更高,因为用的地方很多,组件本身也没太多东西。

既然是鉴权,我们自然需要一个用于判断是否有权限的函数,我们依旧可以使用上一章的check函数

auth.js

//后端返回权限
function getAuthority() {
  return "admin";
}

//判断是否有权限
function check(metaAuthority) {
  const current = getAuthority();
  return  metaAuthority.includes(item);
}

export default {check};

函数式组件

<script>
import { check } from "./utils/auth";
export default {
  functional: true,
  props: {
    //权限数组
    authority: {
      type: Array,
      required: true,
    },
  },
  render(h, context) {
    const { props, scopedSlots } = context;
    return check(props.authority) ? scopedSlots.default() : null;
  },
};
</script>

functional声明这是一个函数式组件,并引入check函数。

props接受一个authority数组,这个数组和路由的meta.authority一样,表示有权限访问的等级数组。

这里我们就不使用template形式的函数式组件,因为如果使用template的话,他必须要有一个元素作为根元素包裹,这无形中会让插槽中接受的html结构发生的变化,所以我们该用render函数。

render接收两个参数,一个是h,也就是createElement方法,第二个是上下文对象。

我们通过结构这个上下文对象,拿到props, scopedSlots,scopedSlots是插槽对象。

然后判断,如果check返回了true,说明我们是有权限访问这个默认插槽接收的内容的,所以返回scopedSlots.default(),反之则是null。

使用

既然组件做好了,我们就需要使用,而这个组件一般来说整个项目会有很多地方用到,所以最好是注册为全局组件使用。

我们在main.js文件中引入并注册

import Authorized form "./components/Authorized";

Vue.component("Authorized",Authorized);

在其他组件中直接使用

<template>
  <div>
    <authorized :authority="['admin']">
      <span>我是admin才能看的内容</span>
    </authorized>
  </div>
</template>

这样就行了。

组件式鉴权,有利有弊,好处就是,他是一个动态响应式的,当用户权限发生变化时,不用刷新页面也能响应。

坏处就是书写有点麻烦,因为你需要写一个组件来使用。

指令鉴权

指令鉴权就相对于组件式的,他就更简单,不用书写那么多代码

在项目里面创建directives文件夹,用于统一存放自定义指令。

在里面创建一个auth.js文件。

内容如下:

import { check } from "../utils/auth";

function install(Vue, options = {}) {
  Vue.directive(options.name || "auth", {
    inserted(el, binding) {
      if (!check(binding.value)) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  });
}

export default { install };

我们也是先引入check鉴权函数,然后导出一个install方法,这个方法用于Vue对象use激活。

接收两个参数,一个是默认传过来的Vue对象,一个是options,options用于自定义的一些设置,可写可不写。

这里写,用于判断是否使用自定义指令名称。

Vue.directive注册一个指令,第一个参数是指令的名称,我们判断有无自定义指令options.name,无就使用默认的auth

第二个参数是一个对象,里面有一些生命周期,我们在inserted生命周期下。

inserted:表示元素被插入到dom时触发

接收两个参数,一个是这个指令所绑定的元素el,一个是binding对象,这对象里面包含指令的name属性,指令绑定的值value属性,还有一些其他的,具体就自己去看vue文档了。

我们这里只需要value值就行了,value就是权限的数组,我们if判断,如果没有权限,我们将这个绑定的el元素从dom中删除。

el是一个原生dom对象,所以删除的时候,要从他的父元素parentNode来使用removeChild删除el。

这样一个自定义指令就写好了,我们对他进行全局注册。

全局注册

import Auth from "./directives/auth";
Vue.use(Auth);

注册完毕后我们这样使用:

<template>
  <div>
    <span v-auth="['admin']"> 我是admin才能看的内容</span>
  </div>
</template>

这样就行了,相对于组件式的,更加方便。

但是指令时的鉴权也是有弊端的,就是他无法响应变化,因为他直接把元素删除了,所以没法回溯回来。如果用户权限发生了变化,只能刷新页面重新判断了。

当然,用户的权限一般来说不会变来变去,所以指令方式也没那么不堪一用。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 518

相关文章