按钮权限设置

frewtyh

于 2024-02-18 17:28:32 发布

阅读量615

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/frewtyh/article/details/136155535

本文介绍了如何使用Vue和Vuex在后台管理系统中实现自定义按钮权限控制，通过指令动态加载并管理由后台返回的按钮列表，确保只有拥有相应权限的用户才能看到特定按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理系统自定义按钮权限，

1.按钮权限通过后台管理，通常是由后台将权限列表统一返回。

2.将后台返回的权限列表进行筛选将按钮list存在store中。并放入浏览器缓存

3.新建一个自定义指令的文件夹directive并创建文件夹module在其中创建permission.js文件

import store from "../../store";

export default {
  inserted(el, binding, vnode) {
  //获取vuex中的按钮权限列表
    let btnPermission = store.state.vuex_menu.buttonList;
    if (btnPermission && j.length) {
      if (!btnPermission.filter(v => {
        return v.buttonId === binding.value;
      }).length) {
        if (el.parentNode) {
          el.parentNode.removeChild(el);
        } else el.remove();
      }
    } else {
      if (el.parentNode) {
        el.parentNode.removeChild(el);
      } else el.remove();
    }
  },
}

4.在文件夹directive创建一个index.js，将其引入

import permission from "./module/permission";

const importDirective = Vue => {
  /**
   * 权限指令 v-permission
   */
  Vue.directive('permission', directive.permission)
}

export default importDirective

5.在main.js中引入并注册

import Vue from 'vue'
import importDirective from '@/directive'
/**
 * 注册指令
 */
importDirective(Vue)

6.接下来只需要在需要的按钮上加v-permission="（对应的id）"就可以了