Vue3实现按钮级别权限的几种方式

按钮级别的权限管理

1、通过公用的hasPermission方法配合v-if、v-show指令，或者disbaled属性控制按钮的是否渲染或禁用

​ 实现按钮级别的权限有很多方法，比如：在vue中可以封装一个公共的方法,将该按钮所需的权限与该用户拥有的权限进行比较,若该用户的权限码列表包含该按钮的所需权限码，则该方法返回ture，否则返回false。

例如：

<van-button type="success" v-if="hasPermission(["1001", "1002"])">新增</van-button>

通过hasPermission传入的按钮所需权限，进行判断该用户是否有该按钮的权限，是否渲染该按钮。

用户登录成功之后，后端会返回该用户的token、按钮权限码列表，再将这些信息存入store中。

hasPermission方法，首先从store中获取该用户的权限码，与该按钮所需的权限码做对比。

function hasPermission(requiredPermissions) {
  // 假设当前用户的权限存储在变量 userPermissions 中
  const userPermissions = ["1001", "1002", "1003"];

  // 检查用户权限是否包含所需权限
  for (const permission of requiredPermissions) {
    if (!userPermissions.includes(permission)) {
      return false;
    }
  }

  // 所有所需权限都存在于用户权限中
  return true;
}

使用ts封装

// permissionUtil.ts
import { useUserStore } from "@/store/user"

// import { PermissionCode } from "@/types/data"
export type PermissionCode = "1001" | "1002" | "1003"

export const hasPermission = (btnPermissions: PermissionCode | PermissionCode[]) => {
    // 用户的权限码
    const userStore = useUserStore()
    const userPermission = userStore.permission as PermissionCode[]

    // 按钮所需单个权限code
    if (!Array.isArray(btnPermissions)) {
        return userPermission.indexOf(btnPermissions) !== -1
    }

    // 按钮所需多个权限code
    for (const btnPermissionCode of btnPermissions) {
        if (!userPermission.includes(btnPermissionCode)) {
            return false;
        }
    }

    return true
}

2、自定义指令的方式

通过公用的hasPermission方法配合自定义指令（v-isAuth）配置

<van-button v-isAuth="['1001', '1002']" type="default">默认按钮</van-button>

// main.ts
app.directive("isAuth", {
    mounted(el: HTMLElement, binding){
        // 按钮所需权限码
        const btnCodes = binding.value
        const isAuth = hasPermission(btnCodes)

        // 无权限
        if(!isAuth){
            el.parentNode?.removeChild(el)
        }
        
    }
})

3、插件的方式

如果觉得在main.ts中注册全局指令不够优雅，也可以使用插件的方式，将逻辑单独放在一个ts文件里

<van-button v-isAuth="['1001', '1002']" type="default">默认按钮</van-button>

// btnPermissionDirective.ts
import { App, DirectiveBinding } from 'vue';
import { hasPermission } from '@/utils/permissionUtil';
import { PermissionCode } from "@/types/data"

const isAuthDirective = {
    mounted(el: HTMLElement, binding: DirectiveBinding<string[]>) {

        const btnCodes = binding.value as PermissionCode[];

        const isAuth = hasPermission(btnCodes);

        if (!isAuth) {
            el.parentNode?.removeChild(el);
        }
    }
};
// 这里会默认导出一个 isAuthDirective方法
export default {
    install(app: App, options: any) {
        app.directive('isAuth', isAuthDirective);
    }
};

在main.ts中使用

// main.js
import isAuthDirective from '@/directives/btnPermissionDirective';

const app = createApp(App)
// 注册插件
app.use(isAuthDirective)

app.mount('#app')