前端自定义指令控制权限（后端Spring Security）

1. 新建 directives/auth.ts





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

1.1完整的authDirective.ts

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 按钮使用





原文地址：https://blog.csdn.net/zhzjn/article/details/142831170

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！