创建一个directives文件夹,在该文件夹下创建一个auth文件夹,然后在此文件夹下面创建一个index.ts文件
import type { Directive, DirectiveBinding } from "vue";
export const auth: Directive = {
// 当指令挂载时调用
mounted(el: HTMLElement, binding: DirectiveBinding) {
// 获取指令的值
const { value } = binding;
console.log(value);
// 获取本地存储的权限
const userPermissions = localStorage.getItem("localAuth")
? localStorage
.getItem("localAuth")
.split(",")
.map(perm => perm.trim())
: [];
// 如果指令有值,则判断本地存储的权限是否包含指令的值,如果不包含则移除该元素
if (value) {
!userPermissions.includes(value) && el.parentNode?.removeChild(el);
} else {
// 如果指令没有值,则抛出错误
throw new Error(
"[Directive: auth]: need auths! Like v-auth=\'pm.work_garbage:workDeleteAction'\""
);
}
}
};
然后在directives此文件夹下面新增index.tx,该文件作用是当有多个自定义指令时无需重复注册指令
export * from "./auth";
最后在main.ts中
// 创建一个应用实例
const app = createApp(App);
// 自定义指令
import * as directives from "@/directives";
Object.keys(directives).forEach(key => {
app.directive(key, (directives as { [key: string]: Directive })[key]);
});
ok结束了
网友评论