木灵鱼儿

木灵鱼儿

阅读：1472

最后更新：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>

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

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

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

文章分类 vue 开发实战
文章标签 vue权限组件权限指令自定义指令renderdirectives
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 1472

版权申明

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

one
two
three

关于作者

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

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目