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

* feat: 新增第二种按钮权限指令（根据登录接口返回的`permissions`字段进行判断）
2025-06-01 02:17:24 +08:00 · 2024-08-12 13:32:04 +08:00 · 2024-08-12 13:32:04 +08:00 · 244ab7f990
commit 244ab7f990
parent 96152ed134
20 changed files with 361 additions and 22 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -57,6 +57,7 @@
    "v-copy",
    "v-longpress",
    "v-optimize",
+    "v-perms",
    "v-ripple"
  ],
  "vscodeCustomCodeColor.highlightValueColor": "#b392f0",
--- a/locales/en.yaml
+++ b/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
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@ -125,6 +125,8 @@ menus:
  purePermission: 权限管理
  purePermissionPage: 页面权限
  purePermissionButton: 按钮权限
+  purePermissionButtonRouter: 路由返回按钮权限
+  purePermissionButtonLogin: 登录接口返回按钮权限
  pureTabs: 标签页操作
  pureGuide: 引导页
  pureAble: 功能
--- a/mock/asyncRoutes.ts
+++ b/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"
+          }
+        }
+      ]
    }
  ]
 };
--- a/mock/login.ts
+++ b/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"
--- a/mock/system.ts
+++ b/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: "",
@ -739,8 +763,8 @@ export default defineFakeRoute([
            showParent: false
          },
          {
-            parentId: 202,
-            id: 204,
+            parentId: 203,
+            id: 211,
            menuType: 3,
            title: "修改",
            name: "",
@ -762,9 +786,105 @@ export default defineFakeRoute([
            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: 205,
+            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: "",
+            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: 204,
+            id: 222,
            menuType: 3,
            title: "删除",
            name: "",
--- a/src/api/user.ts
+++ b/src/api/user.ts
@ -11,6 +11,8 @@ export type UserResult = {
    nickname: string;
    /** 当前登录用户的角色 */
    roles: Array<string>;
+    /** 按钮级别权限 */
+    permissions: Array<string>;
    /** `token` */
    accessToken: string;
    /** 用于调用刷新`accessToken`的接口时所需的`token` */
--- a/src/components/RePerms/index.ts
+++ b/src/components/RePerms/index.ts
@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };
--- a/src/components/RePerms/src/perms.tsx
+++ b/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;
+    };
+  }
+});
--- a/src/directives/index.ts
+++ b/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";
--- a/src/directives/perms/index.ts
+++ b/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']\""
+      );
+    }
+  }
+};
--- a/src/main.ts
+++ b/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";
--- a/src/router/utils.ts
+++ b/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`值 */
--- a/src/store/modules/user.ts
+++ b/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();
--- a/src/store/types.ts
+++ b/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;
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@ -1,6 +1,6 @@
 import Cookies from "js-cookie";
-import { storageLocal } from "@pureadmin/utils";
 import { useUserStoreHook } from "@/store/modules/user";
+import { storageLocal, isString, isIncludeAllChildren } from "@pureadmin/utils";

 export interface DataInfo<T> {
  /** token */
@ -17,6 +17,8 @@ export interface DataInfo<T> {
  nickname?: string;
  /** 当前登录用户的角色 */
  roles?: Array<string>;
+  /** 当前登录用户的按钮级别权限 */
+  permissions?: Array<string>;
 }

 export const userKey = "user-info";
@ -41,7 +43,7 @@ export function getToken(): DataInfo<number> {
 * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
 * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
 * 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
- * 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
+ * 将`avatar`、`username`、`nickname`、`roles`、`permissions`、`refreshToken`、`expires`这七条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
 */
 export function setToken(data: DataInfo<Date>) {
  let expires = 0;
@ -66,18 +68,20 @@ export function setToken(data: DataInfo<Date>) {
      : {}
  );

-  function setUserKey({ avatar, username, nickname, roles }) {
+  function setUserKey({ avatar, username, nickname, roles, permissions }) {
    useUserStoreHook().SET_AVATAR(avatar);
    useUserStoreHook().SET_USERNAME(username);
    useUserStoreHook().SET_NICKNAME(nickname);
    useUserStoreHook().SET_ROLES(roles);
+    useUserStoreHook().SET_PERMS(permissions);
    storageLocal().setItem(userKey, {
      refreshToken,
      expires,
      avatar,
      username,
      nickname,
-      roles
+      roles,
+      permissions
    });
  }

@ -87,7 +91,8 @@ export function setToken(data: DataInfo<Date>) {
      avatar: data?.avatar ?? "",
      username,
      nickname: data?.nickname ?? "",
-      roles
+      roles,
+      permissions: data?.permissions ?? []
    });
  } else {
    const avatar =
@ -98,11 +103,14 @@ export function setToken(data: DataInfo<Date>) {
      storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
    const roles =
      storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
+    const permissions =
+      storageLocal().getItem<DataInfo<number>>(userKey)?.permissions ?? [];
    setUserKey({
      avatar,
      username,
      nickname,
-      roles
+      roles,
+      permissions
    });
  }
 }
@ -118,3 +126,16 @@ export function removeToken() {
 export const formatToken = (token: string): string => {
  return "Bearer " + token;
 };
+
+/** 是否有按钮级别的权限（根据登录接口返回的`permissions`字段进行判断）*/
+export const hasPerms = (value: string | Array<string>): boolean => {
+  if (!value) return false;
+  const allPerms = "*:*:*";
+  const { permissions } = useUserStoreHook();
+  if (!permissions) return false;
+  if (permissions.length === 1 && permissions[0] === allPerms) return true;
+  const isAuths = isString(value)
+    ? permissions.includes(value)
+    : isIncludeAllChildren(value, permissions);
+  return isAuths ? true : false;
+};
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@ -2,7 +2,7 @@
 import { hasAuth, getAuths } from "@/router/utils";

 defineOptions({
-  name: "PermissionButton"
+  name: "PermissionButtonRouter"
 });
 </script>

--- a/src/views/permission/button/perms.vue
+++ b/src/views/permission/button/perms.vue
@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { hasPerms } from "@/utils/auth";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { permissions } = useUserStoreHook();
+
+defineOptions({
+  name: "PermissionButtonLogin"
+});
+</script>
+
+<template>
+  <div>
+    <p class="mb-2">当前拥有的code列表：{{ permissions }}</p>
+    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
+      *:*:* 代表拥有全部按钮级别权限
+    </p>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/perms.vue"
+          target="_blank"
+        >
+          代码位置 src/views/permission/button/perms.vue
+        </el-link>
+      </template>
+      <el-space wrap>
+        <Perms value="permission:btn:add">
+          <el-button plain type="warning">
+            拥有code：'permission:btn:add' 权限可见
+          </el-button>
+        </Perms>
+        <Perms :value="['permission:btn:edit']">
+          <el-button plain type="primary">
+            拥有code：['permission:btn:edit'] 权限可见
+          </el-button>
+        </Perms>
+        <Perms
+          :value="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+        >
+          <el-button plain type="danger">
+            拥有code：['permission:btn:add', 'permission:btn:edit',
+            'permission:btn:delete'] 权限可见
+          </el-button>
+        </Perms>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never" class="mb-2">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-space wrap>
+        <el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button
+          v-if="hasPerms(['permission:btn:edit'])"
+          plain
+          type="primary"
+        >
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-if="
+            hasPerms([
+              'permission:btn:add',
+              'permission:btn:edit',
+              'permission:btn:delete'
+            ])
+          "
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-space wrap>
+        <el-button v-perms="'permission:btn:add'" plain type="warning">
+          拥有code：'permission:btn:add' 权限可见
+        </el-button>
+        <el-button v-perms="['permission:btn:edit']" plain type="primary">
+          拥有code：['permission:btn:edit'] 权限可见
+        </el-button>
+        <el-button
+          v-perms="[
+            'permission:btn:add',
+            'permission:btn:edit',
+            'permission:btn:delete'
+          ]"
+          plain
+          type="danger"
+        >
+          拥有code：['permission:btn:add', 'permission:btn:edit',
+          'permission:btn:delete'] 权限可见
+        </el-button>
+      </el-space>
+    </el-card>
+  </div>
+</template>
--- a/types/directives.d.ts
+++ b/types/directives.d.ts
@ -5,7 +5,7 @@ declare module "vue" {
  export interface ComponentCustomProperties {
    /** `Loading` 动画加载指令，具体看：https://element-plus.org/zh-CN/component/loading.html#%E6%8C%87%E4%BB%A4 */
    vLoading: Directive<Element, boolean>;
-    /** 按钮权限指令 */
+    /** 按钮权限指令（根据路由`meta`中的`auths`字段进行判断）*/
    vAuth: Directive<HTMLElement, string | Array<string>>;
    /** 文本复制指令（默认双击复制） */
    vCopy: Directive<CopyEl, string>;
@ -13,6 +13,8 @@ declare module "vue" {
    vLongpress: Directive<HTMLElement, Function>;
    /** 防抖、节流指令 */
    vOptimize: Directive<HTMLElement, OptimizeOptions>;
+    /** 按钮权限指令（根据登录接口返回的`permissions`字段进行判断）*/
+    vPerms: Directive<HTMLElement, string | Array<string>>;
    /**
     * `v-ripple`指令，用法如下：
     * 1. `v-ripple`代表启用基本的`ripple`功能
--- a/types/global-components.d.ts
+++ b/types/global-components.d.ts
@ -7,6 +7,7 @@ declare module "vue" {
    IconifyIconOnline: (typeof import("../src/components/ReIcon"))["IconifyIconOnline"];
    FontIcon: (typeof import("../src/components/ReIcon"))["FontIcon"];
    Auth: (typeof import("../src/components/ReAuth"))["Auth"];
+    Perms: (typeof import("../src/components/RePerms"))["Perms"];
  }
 }