feat: 新增第二种按钮权限指令（根据登录接口返回的permissions字段进行判断）

.vscode/settings.json

@@ -57,6 +57,7 @@
     "v-copy",
     "v-longpress",
     "v-optimize",
+    "v-perms",
     "v-ripple"
   ],
   "vscodeCustomCodeColor.highlightValueColor": "#b392f0",

locales/en.yaml

@@ -125,6 +125,8 @@ menus:
   purePermission: Permission Manage
   purePermissionPage: Page Permission
   purePermissionButton: Button Permission
+  purePermissionButtonRouter: Route return button permission
+  purePermissionButtonLogin: Login interface return button permission
   pureTabs: Tabs Operate
   pureGuide: Guide
   pureAble: Able

locales/zh-CN.yaml

@@ -125,6 +125,8 @@ menus:
   purePermission: 权限管理
   purePermissionPage: 页面权限
   purePermissionButton: 按钮权限
+  purePermissionButtonRouter: 路由返回按钮权限
+  purePermissionButtonLogin: 登录接口返回按钮权限
   pureTabs: 标签页操作
   pureGuide: 引导页
   pureAble: 功能

mock/asyncRoutes.ts

@@ -123,17 +123,34 @@ const permissionRouter = {
       }
     },
     {
-      path: "/permission/button/index",
-      name: "PermissionButton",
+      path: "/permission/button",
       meta: {
         title: "menus.purePermissionButton",
-        roles: ["admin", "common"],
-        auths: [
-          "permission:btn:add",
-          "permission:btn:edit",
-          "permission:btn:delete"
-        ]
-      }
+        roles: ["admin", "common"]
+      },
+      children: [
+        {
+          path: "/permission/button/router",
+          component: "permission/button/index",
+          name: "PermissionButtonRouter",
+          meta: {
+            title: "menus.purePermissionButtonRouter",
+            auths: [
+              "permission:btn:add",
+              "permission:btn:edit",
+              "permission:btn:delete"
+            ]
+          }
+        },
+        {
+          path: "/permission/button/login",
+          component: "permission/button/perms",
+          name: "PermissionButtonLogin",
+          meta: {
+            title: "menus.purePermissionButtonLogin"
+          }
+        }
+      ]
     }
   ]
 };

mock/login.ts

@@ -15,6 +15,8 @@ export default defineFakeRoute([
             nickname: "小铭",
             // 一个用户可能有多个角色
             roles: ["admin"],
+            // 按钮级别权限
+            permissions: ["*:*:*"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
             expires: "2030/10/30 00:00:00"
@@ -28,6 +30,7 @@ export default defineFakeRoute([
             username: "common",
             nickname: "小林",
             roles: ["common"],
+            permissions: ["permission:btn:add", "permission:btn:edit"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
             expires: "2030/10/30 00:00:00"

mock/system.ts

@@ -696,7 +696,7 @@ export default defineFakeRoute([
             menuType: 0,
             title: "menus.purePermissionButton",
             name: "PermissionButton",
-            path: "/permission/button/index",
+            path: "/permission/button",
             component: "",
             rank: null,
             redirect: "",
@@ -717,6 +717,30 @@ export default defineFakeRoute([
           {
             parentId: 202,
             id: 203,
+            menuType: 0,
+            title: "menus.purePermissionButtonRouter",
+            name: "PermissionButtonRouter",
+            path: "/permission/button/router",
+            component: "permission/button/index",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 210,
             menuType: 3,
             title: "添加",
             name: "",
@@ -738,9 +762,105 @@ export default defineFakeRoute([
             showLink: true,
             showParent: false
           },
+          {
+            parentId: 203,
+            id: 211,
+            menuType: 3,
+            title: "修改",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:edit",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 203,
+            id: 212,
+            menuType: 3,
+            title: "删除",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:delete",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
           {
             parentId: 202,
             id: 204,
+            menuType: 0,
+            title: "menus.purePermissionButtonLogin",
+            name: "PermissionButtonLogin",
+            path: "/permission/button/login",
+            component: "permission/button/perms",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 220,
+            menuType: 3,
+            title: "添加",
+            name: "",
+            path: "",
+            component: "",
+            rank: null,
+            redirect: "",
+            icon: "",
+            extraIcon: "",
+            enterTransition: "",
+            leaveTransition: "",
+            activePath: "",
+            auths: "permission:btn:add",
+            frameSrc: "",
+            frameLoading: true,
+            keepAlive: false,
+            hiddenTag: false,
+            fixedTag: false,
+            showLink: true,
+            showParent: false
+          },
+          {
+            parentId: 204,
+            id: 221,
             menuType: 3,
             title: "修改",
             name: "",
@@ -763,8 +883,8 @@ export default defineFakeRoute([
             showParent: false
           },
           {
-            parentId: 202,
-            id: 205,
+            parentId: 204,
+            id: 222,
             menuType: 3,
             title: "删除",
             name: "",

src/api/user.ts

@@ -11,6 +11,8 @@ export type UserResult = {
     nickname: string;
     /** 当前登录用户的角色 */
     roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
     /** `token` */
     accessToken: string;
     /** 用于调用刷新`accessToken`的接口时所需的`token` */

src/components/RePerms/index.ts

@@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };

src/components/RePerms/src/perms.tsx

@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasPerms } from "@/utils/auth";
+
+export default defineComponent({
+  name: "Perms",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasPerms(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});

src/directives/index.ts

@@ -2,4 +2,5 @@ export * from "./auth";
 export * from "./copy";
 export * from "./longpress";
 export * from "./optimize";
+export * from "./perms";
 export * from "./ripple";

src/directives/perms/index.ts

@@ -0,0 +1,15 @@
+import { hasPerms } from "@/utils/auth";
+import type { Directive, DirectiveBinding } from "vue";
+
+export const perms: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+    const { value } = binding;
+    if (value) {
+      !hasPerms(value) && el.parentNode?.removeChild(el);
+    } else {
+      throw new Error(
+        "[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
+      );
+    }
+  }
+};

src/main.ts

@@ -44,7 +44,9 @@ app.component("FontIcon", FontIcon);
 
 // 全局注册按钮级别权限组件
 import { Auth } from "@/components/ReAuth";
+import { Perms } from "@/components/RePerms";
 app.component("Auth", Auth);
+app.component("Perms", Perms);
 
 // 全局注册vue-tippy
 import "tippy.js/dist/tippy.css";

src/router/utils.ts

@@ -355,7 +355,7 @@ function getAuths(): Array<string> {
   return router.currentRoute.value.meta.auths as Array<string>;
 }
 
-/** 是否有按钮级别的权限 */
+/** 是否有按钮级别的权限（根据路由`meta`中的`auths`字段进行判断）*/
 function hasAuth(value: string | Array<string>): boolean {
   if (!value) return false;
   /** 从当前路由的`meta`字段里获取按钮级别的所有自定义`code`值 */

src/store/modules/user.ts

@@ -27,6 +27,9 @@ export const useUserStore = defineStore({
     nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
     // 页面级别权限
     roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
+    // 按钮级别权限
+    permissions:
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [],
     // 前端生成的验证码（按实际需求替换）
     verifyCode: "",
     // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
@@ -53,6 +56,10 @@ export const useUserStore = defineStore({
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
     },
+    /** 存储按钮级别权限 */
+    SET_PERMS(permissions: Array<string>) {
+      this.permissions = permissions;
+    },
     /** 存储前端生成的验证码 */
     SET_VERIFYCODE(verifyCode: string) {
       this.verifyCode = verifyCode;
@@ -86,6 +93,7 @@ export const useUserStore = defineStore({
     logOut() {
       this.username = "";
       this.roles = [];
+      this.permissions = [];
       removeToken();
       useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
       resetRouter();

src/store/types.ts

@@ -42,6 +42,7 @@ export type userType = {
   username?: string;
   nickname?: string;
   roles?: Array<string>;
+  permissions?: Array<string>;
   verifyCode?: string;
   currentPage?: number;
   isRemembered?: boolean;