前端自定义指令控制权限(后端Spring Security)

1. 新建 directives/auth.ts

javascript 复制代码
//导入自定义指令
import auth from '@/directives/auth'// 注册全局自定义指令 v-auth
app.directive('auth', auth);

1.1完整的authDirective.ts

javascript 复制代码
import { wmsStore } from "@/store/pinia"

// 判断用户是否有某个角色的函数
const hasRoles = (roles: any) => {

  const pinaRoles: any = wmsStore().roles;

  if (Array.isArray(roles)) {
    return roles.some(role => pinaRoles.includes(role));
  } else if (typeof roles === 'string') {
    return pinaRoles.includes(roles);
  } else {
     return false
  }

}
// 判断用户是否有某个权限的函数,同上
const hasPermissions = (permission: any) => {

  return true
}

// 创建自定义指令
export default {
  mounted(el: HTMLElement, binding: any) {
 
    const type = binding.arg
    if (type === 'role') {
      if (!hasRoles(binding.value)) {
        el.remove()
      }
    }
  },
};
  

2.如何使用

2.1 菜单使用方式

2.2 按钮使用

相关推荐
佛系菜狗4 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息25 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.32 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快2 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛2 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_2 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮