feat(projects): 权限完善及权限示例页面

src/directives/index.ts

@@ -1,9 +1,11 @@
 import type { App } from 'vue';
 import setupNetworkDirective from './network';
 import setupLoginDirective from './login';
+import setupPermissionDirective from './permission';
 
 /** setup custom vue directives. - [安装自定义的vue指令] */
 export function setupDirectives(app: App) {
   setupNetworkDirective(app);
   setupLoginDirective(app);
+  setupPermissionDirective(app);
 }

src/directives/permission.ts

@@ -1,16 +1,28 @@
 import type { App, Directive } from 'vue';
 import { useAuthStore } from '@/store';
+import { isArray, isString } from '@/utils';
 
-export default function setupLoginDirective(app: App) {
+export default function setupPermissionDirective(app: App) {
   const auth = useAuthStore();
 
-  const loginDirective: Directive<HTMLElement, Auth.RoleType | undefined> = {
+  const permissionDirective: Directive<HTMLElement, Auth.RoleType | Auth.RoleType[]> = {
     mounted(el: HTMLElement, binding) {
-      if (binding.value !== auth.userInfo.userRole) {
+      const { userRole } = auth.userInfo;
+      const elPermission = binding.value;
+      let hasPermission = userRole === 'super';
+      if (!hasPermission) {
+        if (isArray(elPermission)) {
+          hasPermission = (elPermission as Auth.RoleType[]).includes(userRole);
+        }
+        if (isString(elPermission)) {
+          hasPermission = (elPermission as Auth.RoleType) === userRole;
+        }
+      }
+      if (!hasPermission) {
         el.remove();
       }
     }
   };
 
-  app.directive('login', loginDirective);
+  app.directive('permission', permissionDirective);
 }