vue3 封裝背景系統按鈕權限控制

1、封裝權限指令permission

import { useRoutesStore } from "@/store/modules/routes";
export const permission = {
  mounted(el, binding) {
    const routesStore = useRoutesStore();
    const { value } = binding;
    if (value && value instanceof Array && value.length > 0) {
      const permissionFunc = value;
      //判斷傳遞進來的按鈕權限，使用者是否擁有
      const hasPermission = routesStore.permission.some((role) => {
        return permissionFunc.includes(role);
      });
      if (!hasPermission) {
        el.style.display = "none";
      }
    } else {
      throw new Error("need roles! Like v-permission=\"['admin','editor']\"");
    }
  },
};      

View Code

 2、全局注冊指令

import * as directives from '@/directives'

Object.keys(directives).forEach(key=>{
    app.directive(key,directives[key])
})      

View Code

3、元件使用

<button v-permission="['user.add']">新增</button>      

View Code