惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
Jina AI
Jina AI
大猫的无限游戏
大猫的无限游戏
Martin Fowler
Martin Fowler
博客园 - 司徒正美
云风的 BLOG
云风的 BLOG
C
Cybersecurity and Infrastructure Security Agency CISA
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
S
Securelist
S
Security Affairs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
L
LINUX DO - 热门话题
博客园 - 三生石上(FineUI控件)
T
Threatpost
T
The Blog of Author Tim Ferriss
C
CERT Recently Published Vulnerability Notes
IT之家
IT之家
P
Palo Alto Networks Blog
Microsoft Azure Blog
Microsoft Azure Blog
Spread Privacy
Spread Privacy
Cyberwarzone
Cyberwarzone
腾讯CDC
L
LangChain Blog
Know Your Adversary
Know Your Adversary
C
CXSECURITY Database RSS Feed - CXSecurity.com
GbyAI
GbyAI
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
I
Intezer
T
Tor Project blog
AWS News Blog
AWS News Blog
T
Tenable Blog
NISL@THU
NISL@THU
Security Latest
Security Latest
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
H
Hackread – Cybersecurity News, Data Breaches, AI and More
人人都是产品经理
人人都是产品经理
MongoDB | Blog
MongoDB | Blog
MyScale Blog
MyScale Blog
D
DataBreaches.Net
Microsoft Security Blog
Microsoft Security Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
量子位
美团技术团队
The Cloudflare Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
罗磊的独立博客
The GitHub Blog
The GitHub Blog
阮一峰的网络日志
阮一峰的网络日志
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Stack Overflow Blog
Stack Overflow Blog

博客园 - Mc525

antv3 x6 基本语法-流程图(二) element ui el-form 表单错误 滚动可视区域 vue2 element ui el-table大数据处理无分页解决方案-分片加载 vue2 地图热力图 -下钻省市县 三级及地图资源文件 vue2 组件封装 el-select vue2 组件封装 el-input vue2 组件封装 el-date-picker 日期 vue2 scss sass 基础安装包、安装依赖报错 !!! vue2 封装组件使用 v-mode【el-radio,el-input】 Mac Jenkins 环境部署 vue2 换肤(六) vue2 项目实例 国际化(五) vue2 项目实例 动态路由菜单(四) vue2 项目实例 Mock数据模拟(三) vue2 项目实例 Layout布局(二) vue2 项目实例 项目初始化(一) vue2 项目架构--api.js(七) vue2 项目架构--vue.config.js(七) vue2 项目架构--main.js(六)
vue2 按钮权限(七)
Mc525 · 2025-10-10 · via 博客园 - Mc525

实现思路

   权限格式,快速查找当前菜单下按钮权限,而不是跌倒所有权限匹配

{
   "*:*:*":{ // 系统id
      "*:*:*":['sys:user:add','sys:user:del'] // 菜单menuid
   },
   ......
}

目录结构

image

  hasPermi.js

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
     const all_permission = "*:*:*";
    const permissions = store.getters.getPermission
    
    let m_pms = []
    if (!permissions['*:*:*']) {
      const systemKey =  store.state.systemKey  // 系统id
      const menuId =  store.state.menuId  // 菜单id
      let s_pms = permissions[systemKey]
       m_pms = s_pms[menuId]  // 当前菜单下所有 按钮权限
    }
     

    if (value && value instanceof Array && value.length > 0) {
      if (permissions[all_permission]) return false
        const permissionFlag = value
        
        const hasPermissions = m_pms.some(permission => {
        return permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    
    // 不考虑id 把上边注释,使用下边打开注释
    //   const hasPermission = permissions.some(perm => {
    //     return value.includes(perm)
    //   })
     

      if (!hasPermissions) {
        console.log(el)
        el.parentNode && el.parentNode.removeChild(el)
        // el.setAttribute("disabled", "disabled")
      }
    } else {
      throw new Error(`需要指定权限标识! 如 v-permission="['sys:user:add']"`)
    }
  }
}

index.js

import hasRole from './hasRole'
import hasPermi from './hasPermi'  
const install = function(Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi) 
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi 
  Vue.use(install); 
}

export default install

全局注册

main.js

import permission from './directive/permission'
Vue.use(permission)

VUEX

store→modules→user.js

const getters = {
     permissions:state=>state.user.permissions
}
export default getters

store→user.js

import { getInfo } from "@/api/user";
import { getToken } from "@/utils/auth";

const getDefaultState = () => {
  return {
    token: getToken(),
    permissions: [],
  };
};

const user = {
  state: getDefaultState(),
  mutations: {
    SET_PERMISSION: (state, permissions) => {
      state.permissions = permissions;
    },
  },

  actions: {
    //获取当前登录用户信息
    getInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token)
          .then((res) => {
            const { data } = res;
            if (!data) {
              return reject("Verification failed, please Login again.");
            }
            const { permissions } = data;
            commit("SET_PERMISSION", permissions);
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
};

export default user;

store→getter.js

const getters = {
     permissions:state=>state.user.permissions
}
export default getters

store.dispatch('settings/xxxx', item)

页面使用按钮添加v-permission

<el-button type="primary" v-permission="['sys:user:de','sys:user:add']" @click="handleAdd">新增</el-button>