前端自定义指令控制权限(后端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 按钮使用

相关推荐
泷羽Sec-静安2 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端2 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4962 小时前
Web Components简介及如何使用
前端·javascript·html
进击的野人2 小时前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
jump6802 小时前
TS中 unknown 和 any 的区别
前端
无羡仙2 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊3 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇3 小时前
ts 定义重复对象字段
前端
HashTang4 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼4 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信