权限指令

src/components/home/header.vue

@@ -52,7 +52,7 @@
           </li>
 
           <!-- 驾驶舱门户 -->
-          <li>
+          <li v-hasPermi="['portal:dashboard:view']">
             <a
               class="cursor-pointer px-3 py-1.5 rounded-md transition-all duration-300"
               :class="

src/directives/index.ts

@@ -0,0 +1,24 @@
+import type { App } from 'vue'
+import { hasRole } from './permission/hasRole'
+import { hasPermi } from './permission/hasPermi'
+
+/**
+ * 导出指令：v-xxx
+ * @methods hasRole 用户权限，用法: v-hasRole
+ * @methods hasPermi 按钮权限，用法: v-hasPermi
+ */
+export const setupAuth = (app: App<Element>) => {
+  hasRole(app)
+  hasPermi(app)
+}
+
+/**
+ * 导出指令：v-mountedFocus
+ */
+export const setupMountedFocus = (app: App<Element>) => {
+  app.directive('mountedFocus', {
+    mounted(el) {
+      el.focus()
+    }
+  })
+}

src/directives/permission/hasPermi.ts

@@ -0,0 +1,29 @@
+import type { App } from "vue";
+import { useUserStoreWithOut } from "@/stores/useUserStore";
+
+/** 判断权限的指令 directive */
+export function hasPermi(app: App<Element>) {
+  app.directive("hasPermi", (el, binding) => {
+    const { value } = binding;
+
+    if (value && value instanceof Array && value.length > 0) {
+      const hasPermissions = hasPermission(value);
+
+      if (!hasPermissions) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error("权限错误");
+    }
+  });
+}
+
+/** 判断权限的方法 function */
+const all_permission = "*:*:*";
+export const hasPermission = (permission: string[]) => {
+  const userStore = useUserStoreWithOut();
+  return (
+    userStore.permissions.has(all_permission) ||
+    permission.some((permission) => userStore.permissions.has(permission))
+  );
+};

src/directives/permission/hasRole.ts

@@ -0,0 +1,26 @@
+import type { App } from "vue";
+import { CACHE_KEY, useCache } from "@/hooks/useCache";
+
+export function hasRole(app: App<Element>) {
+  app.directive("hasRole", (el, binding) => {
+    const { wsCache } = useCache();
+    const { value } = binding;
+    const super_admin = "super_admin";
+    const userInfo = wsCache.get(CACHE_KEY.USER);
+    const roles = userInfo?.roles || [];
+
+    if (value && value instanceof Array && value.length > 0) {
+      const roleFlag = value;
+
+      const hasRole = roles.some((role: string) => {
+        return super_admin === role || roleFlag.includes(role);
+      });
+
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error("");
+    }
+  });
+}

src/main.ts

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 
-// 引入状态管理
 import { setupStore } from "@/stores";
 
 import "./assets/style/main.css";
@@ -9,12 +8,16 @@ import "element-plus/dist/index.css";
 import ElementPlus from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 
+import { setupAuth, setupMountedFocus } from "@/directives";
+
 import App from "./App.vue";
 import router from "./router";
 
 const app = createApp(App);
 
 setupStore(app);
+setupAuth(app);
+setupMountedFocus(app);
 
 app.use(ElementPlus, {
   locale: zhCn,