Vue 按钮权限 —— sessionStorage

micoria

已于 2022-03-04 17:08:52 修改

阅读量145

点赞数

分类专栏： Vue javascript 实例

于 2022-03-04 17:03:18 首次发布

本文链接：https://blog.csdn.net/micoria/article/details/123280067

版权

Vue 自定义指令权限控制角色 sessionStorage

关键词由CSDN通过智能技术生成

javascript 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

实例

6 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

使用场景：
在项目中会有很多个角色，如管理员，用户等等，这时就会设置这些角色的操作权限，比如新增、编辑等等。
如果有很多个按钮，我推荐使用全局自定义指令：

在登录的时候调取接口进行存储

// 调用后端的接口 获取数据['del_btn', 'edit_btn', 'add_btn']
// 这里自己先定义
sessionStorage.setItem('btnPermission', JSON.stringify(['del_btn', 'edit_btn', 'add_btn']))

创建directive.js文件

  import Vue from 'vue'

  /***
   * @description 自定义指令
   * 
   */

  Vue.directive('hasBtnPerm', {
    inserted: function(el, binding) {
      // 是否包含此元素，如果不包含，那就让父元素把子元素扔进垃圾堆
      if (!btnPermision(binding.value)) {
        el.parentNode.removeChild(el)
      }
    }
  })

  // 按钮权限
  function btnPermision(value) {
    let isExit = false
    let btnPermsStr = JSON.parse(sessionStorage.getItem("btnPermission"));
    if (btnPermsStr == null || btnPermsStr == undefined) {
      return false
    }
    btnPermsStr.some(item => {
      // 如果有此字段，则显示
      if (item == value) {
        isExit = true
        return true
      }
    })
    /*
	for (let i = 0; i < btnPermsStr.length; i++) {
      let btnPermsCode = btnPermsStr[i]
      // 要拿数据中不变的并且可以使用的字段进行判断，不可以使用id
      // 如果有此字段则显示，则显示
      if (btnPermsCode == value) {
        isExit = true;
        break;
      }
    }
	*/
    return isExit;
  }

  export {
    btnPermision
  }

在 main.js 里进行全局配置

import { btnPermision } from "@/assets/util/directive"
Vue.prototype.$hasBtnPerm= btnPermision

在模块中使用

<p class="operate-btn" v-hasBtnPerm="'add_btn'" @click="addQuickAccess">新增</p>

问题

在自定义指令中使用 bind 下 el.parentNode.removeChild(el) 失效？
解决方式：使用 inserted 。

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但可以通过比较更新前后的值来忽略不必要的模板更新。
全部更新后调用。 unbind：只调用一次，指令与元素解绑时调用。