🔱: [client] sync upgrade with 21 commits [trident-sync]

Update README.md

packages/ui/certd-client/src/plugin/permission/api.ts

@@ -0,0 +1,10 @@
+import { request } from "/src/api/service";
+export async function getPermissions() {
+  const ret = await request({
+    url: "/sys/authority/user/permissions",
+    method: "post"
+  });
+  // 如果使用你自己的后端，需要在此处将返回结果改造为本模块需要的结构
+  // 结构详情，请参考示例中打印的日志 ”获取权限数据成功：{...}“ （实际上就是“资源管理”页面中列出来的数据）
+  return ret;
+}

packages/ui/certd-client/src/plugin/permission/directive/index.js

@@ -0,0 +1,9 @@
+import permission from "./permission";
+import permissionUtil from "../util.permission";
+const install = function (app) {
+  app.directive("permission", permission);
+  app.config.globalProperties.$hasPermissions = permissionUtil.hasPermissions;
+};
+
+permission.install = install;
+export default permission;

packages/ui/certd-client/src/plugin/permission/directive/permission.js

@@ -0,0 +1,11 @@
+import permissionUtil from "../util.permission";
+export default {
+  mounted(el, binding, vnode) {
+    const { value } = binding;
+    const hasPermission = permissionUtil.hasPermissions(value);
+
+    if (!hasPermission) {
+      el.parentNode && el.parentNode.removeChild(el);
+    }
+  }
+};

packages/ui/certd-client/src/plugin/permission/errors.ts

@@ -0,0 +1,5 @@
+export class NoPermissionError extends Error {
+  constructor(message?: string) {
+    super(message || "对不起，您没有权限执行此操作");
+  }
+}

packages/ui/certd-client/src/plugin/permission/hook.ts

@@ -0,0 +1,45 @@
+import router from "/src/router";
+import { useUserStore } from "/@/store/modules/user";
+import { usePermissionStore } from "./store.permission";
+import util from "./util.permission";
+import { message } from "ant-design-vue";
+import NProgress from "nprogress";
+export function registerRouterHook() {
+  // 注册路由beforeEach钩子，在第一次加载路由页面时，加载权限
+  router.beforeEach(async (to, from, next) => {
+    const permissionStore = usePermissionStore();
+    if (permissionStore.isInited) {
+      if (to.meta.permission) {
+        //校验权限
+        // @ts-ignore
+        if (!util.hasPermissions(to.meta.permission)) {
+          //没有权限
+          message.warn("对不起，您没有权限");
+          //throw new Error("对不起，您没有权限");
+          NProgress.done();
+          return false;
+        }
+      }
+      next();
+      return;
+    }
+
+    const userStore = useUserStore();
+    const token = userStore.getToken;
+    if (!token || token === "undefined") {
+      next();
+      return;
+    }
+
+    // 初始化权限列表
+    try {
+      console.log("permission is enabled");
+      await permissionStore.loadFromRemote();
+      console.log("PM load success");
+      next({ ...to, replace: true });
+    } catch (e) {
+      console.error("加载动态路由失败", e);
+      next();
+    }
+  });
+}

packages/ui/certd-client/src/plugin/permission/index.ts

@@ -0,0 +1,23 @@
+import permissionDirective from "./directive/index";
+import { registerRouterHook } from "./hook";
+import util from "./util.permission";
+export * from "./use-crud-permission";
+export * from "./errors";
+
+export function usePermission() {
+  return {
+    ...util
+  };
+}
+
+export default {
+  install(app) {
+    // 开启权限模块
+    // 注册v-permission指令, 用于控制按钮权限
+    app.use(permissionDirective);
+    // 注册路由钩子
+    // 通过路由守卫，在登录成功后拦截路由，从后台加载权限数据
+    // 然后将权限数据转化为菜单和路由，添加到系统中
+    registerRouterHook();
+  }
+};

packages/ui/certd-client/src/plugin/permission/store.permission.ts

@@ -0,0 +1,89 @@
+import { defineStore } from "pinia";
+import { useResourceStore } from "/src/store/modules/resource";
+import { getPermissions } from "./api";
+import { mitter } from "/@/utils/util.mitt";
+import { env } from "/@/utils/util.env";
+
+//监听注销事件
+mitter.on("app.logout", () => {
+  const permissionStore = usePermissionStore();
+  permissionStore.clear();
+});
+
+interface PermissionState {
+  permissions: [];
+  inited: boolean;
+}
+
+/**
+ * 构建权限码列表
+ * @param menuTree
+ * @param permissionList
+ * @returns {*}
+ */
+function formatPermissions(menuTree: Array<any>, permissionList = []) {
+  if (menuTree == null) {
+    menuTree = [];
+  }
+  menuTree.forEach((item: any) => {
+    if (item.permission) {
+      // @ts-ignore
+      permissionList.push(item.permission);
+    }
+    if (item.children != null && item.children.length > 0) {
+      formatPermissions(item.children, permissionList);
+    }
+  });
+  return permissionList;
+}
+
+export const usePermissionStore = defineStore({
+  id: "app.permission",
+  state: (): PermissionState => ({
+    permissions: [],
+    inited: false
+  }),
+  getters: {
+    getPermissions() {
+      // @ts-ignore
+      return this.permissions;
+    },
+    isInited() {
+      // @ts-ignore
+      return this.inited;
+    }
+  },
+  actions: {
+    init({ permissions }) {
+      this.permissions = permissions;
+      this.inited = true;
+    },
+    clear() {
+      this.permissions = [];
+      this.inited = false;
+    },
+    resolve(resourceTree) {
+      const permissions = formatPermissions(resourceTree);
+      this.init({ permissions });
+
+      //过滤没有权限的菜单
+      const resourceStore = useResourceStore();
+      resourceStore.filterByPermission(permissions);
+    },
+    async loadFromRemote() {
+      let permissionTree = [];
+      if (env.PM_ENABLED === "false") {
+        console.warn("当前权限模块未开启，权限列表为空");
+      } else {
+        //开启了权限模块，向后台请求权限列表
+        const data = await getPermissions();
+        if (data != null) {
+          permissionTree = data;
+        } else {
+          console.warn("当前获取到的权限列表为空");
+        }
+      }
+      this.resolve(permissionTree);
+    }
+  }
+});

packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts

@@ -0,0 +1,60 @@
+import { usePermission } from "/@/plugin/permission";
+import _ from "lodash-es";
+
+/**
+ * 设置按钮动作权限
+ * @param permission {prefix,extra}
+ */
+export function useCrudPermission({ permission }) {
+  const { hasPermissions } = usePermission();
+
+  const prefix = permission instanceof Object ? permission.prefix : permission;
+
+  //根据权限显示按钮
+  function hasActionPermission(action) {
+    if (!prefix) {
+      return true;
+    }
+    return hasPermissions(prefix + ":" + action);
+  }
+
+  function buildCrudPermission() {
+    if (permission == null) {
+      return {};
+    }
+
+    let extra = {};
+    if (permission instanceof Object) {
+      extra = permission.extra;
+      if (permission.extra && permission.extra instanceof Function) {
+        extra = permission.extra({ hasActionPermission });
+      }
+    }
+
+    return _.merge(
+      {
+        actionbar: {
+          buttons: {
+            add: { show: hasActionPermission("add") }
+          }
+        },
+        rowHandle: {
+          buttons: {
+            edit: { show: hasActionPermission("edit") },
+            remove: { show: hasActionPermission("remove") },
+            view: { show: hasActionPermission("view") }
+          }
+        }
+      },
+      extra
+    );
+  }
+
+  function merge(userOptions) {
+    const permissionOptions = buildCrudPermission();
+    _.merge(permissionOptions, userOptions);
+    return permissionOptions;
+  }
+
+  return { merge, buildCrudPermission, hasActionPermission };
+}

packages/ui/certd-client/src/plugin/permission/util.permission.ts

@@ -0,0 +1,29 @@
+import { usePermissionStore } from "./store.permission";
+import { NoPermissionError } from "./errors";
+import { message } from "ant-design-vue";
+const util = {
+  hasPermissions: (value: string | string[]): boolean => {
+    let need: string[] = [];
+    if (typeof value === "string") {
+      need.push(value);
+    } else if (value && value instanceof Array && value.length > 0) {
+      need = need.concat(value);
+    }
+    if (need.length === 0) {
+      throw new Error('need permissions! Like "sys:user:view" ');
+    }
+    const permissionStore = usePermissionStore();
+    const userPermissionList = permissionStore.getPermissions;
+    return userPermissionList.some((permission) => {
+      return need.includes(permission);
+    });
+  },
+  requirePermissions: (value) => {
+    if (!util.hasPermissions(value)) {
+      message.error("对不起，您没有权限执行此操作");
+      throw new NoPermissionError();
+    }
+  }
+};
+
+export default util;