@pubinfo/module-crypto 2.1.1

package/src/cryptoSetting.ts

@@ -0,0 +1,67 @@
+import type { RequestMethod } from 'pubinfo';
+import type { cryptoInternal } from './interface';
+import { ctx } from './context';
+import { rsaEncrypt } from './cryptoAlg/rsa';
+
+export function isMethodNeedCrypto(url: string, isCrypto: boolean, cryptoMode: boolean, whiteListUrls?: API.UrlEntry[]): boolean {
+  if (url === '/crypto/getPublicKeyAndConfig') {
+    return false;
+  }
+  return !isUrlInWhiteList(url, cryptoMode, whiteListUrls) && isCrypto;
+}
+// URL匹配方法
+export function isUrlInWhiteList(url: string, cryptoMode: boolean, whiteListUrls?: API.UrlEntry[]): boolean {
+  if (cryptoMode && whiteListUrls?.length === 0) {
+    return false;
+  }
+  else if (!cryptoMode && whiteListUrls?.length === 0) {
+    return true;
+  }
+  else {
+    const urls = whiteListUrls?.map(item => item.url) || [];
+    const bo = urls.some((pattern) => {
+      pattern = pattern?.trim();
+      url = url.trim();
+      // 转义正则特殊字符，但保留 * 和 /
+      let regexPattern = pattern?.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
+      // 将 ** 替换为匹配任意字符（包括斜杠）的模式
+      regexPattern = regexPattern?.replace(/\*\*/g, '(.+)');
+      // 将 * 替换为匹配除斜杠外任意字符的模式
+      regexPattern = regexPattern?.replace(/(^|[^\\])\*/g, '$1[^/]*');
+      // 添加起始和结束锚点
+      regexPattern = `^${regexPattern}$`;
+      const regex = new RegExp(regexPattern);
+      return regex.test(url);
+    });
+    return cryptoMode ? bo : !bo;
+  }
+}
+
+async function encryptMethod(method: RequestMethod, fun: (arg0: string) => Promise<string>) {
+  if (method.data && !(method.data instanceof FormData)) {
+    method.data = await fun(JSON.stringify(method.data));
+  }
+  if (method.config.params && JSON.stringify(method.config.params) !== '{}') {
+    // 格式化params，去除undefined值
+    const newParams = JSON.parse(JSON.stringify(method.config.params));
+    method.config.params = { secureData: decodeURIComponent(await fun(decodeURIComponent(new URLSearchParams(newParams).toString()))) };
+  }
+  if (method.config.meta && method.config.meta.pathParams) {
+    for (const item of method.config.meta.pathParams) {
+      method.url = method.url.replace(item, await fun(item));
+    }
+  }
+}
+
+// 加密入口
+export async function encrypt(method: RequestMethod, cryptoSetting: cryptoInternal) {
+  const KEY = ctx.use().key;
+  const iv = ctx.use().iv;
+  method.config.headers['X-Crypyto-Key'] = await rsaEncrypt(JSON.stringify({ 'Algorithm-Name': cryptoSetting?.name, 'Algorithm-Key': KEY, 'Algorithm-Iv': iv, ...cryptoSetting?.header }));
+  await encryptMethod(method, cryptoSetting.encrypt);
+}
+
+// 解密入口
+export async function decrypt(response: any, cryptoSetting: cryptoInternal) {
+  response.data = await cryptoSetting.decrypt(response.data);
+}

package/src/helper.ts

@@ -0,0 +1,21 @@
+import type { RequestMethod } from 'pubinfo';
+
+export function setMethodRole(method: RequestMethod) {
+  method.meta = {
+    authRole: null,
+  };
+  return method;
+}
+
+export function generateKey(num: number) {
+  const library = 'ABCDEFabcdef0123456789';
+  let key = '';
+  if (num < 0) {
+    return key;
+  }
+  for (let i = 0; i < num; i++) {
+    const randomPoz = Math.floor(Math.random() * library.length);
+    key += library.substring(randomPoz, randomPoz + 1);
+  }
+  return key;
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+import type { ModuleOptions, RequestMethod } from 'pubinfo';
+import type { CryptoOptions } from './interface';
+import { defineIconModule, defineRouteModule } from 'pubinfo';
+import modules from 'virtual:pubinfo-resolver';
+import { getCryptoGetPublicKeyAndConfig } from './api/modules/crypto';
+import { apictx } from './apiContext';
+import { ctx } from './context';
+import { setupAes } from './cryptoAlg/aes.ts';
+import { decrypt, encrypt, isMethodNeedCrypto } from './cryptoSetting';
+import { generateKey, setMethodRole } from './helper';
+import 'uno.css';
+
+export function crypto(options: CryptoOptions): ModuleOptions {
+  const { request, cryptoSetting } = options;
+  apictx.set({ request });
+  ctx.set({ isCrypto: false, cryptoMode: false, cryptoSetting: setupAes() });
+  defineRouteModule('crypto', modules.pages);
+  defineIconModule('crypto', modules.icons);
+
+  return {
+    name: 'pubinfo:crypto',
+    enforce: 'pre',
+    async setup() {
+      // 获取页面配置
+      const method = setMethodRole(getCryptoGetPublicKeyAndConfig());
+      const { data } = await method;
+      const key = generateKey(32);
+      const iv = generateKey(32);
+      ctx.callAsync({
+        publicKey: data.publicKey,
+        isCrypto: data.cryptoEnabled || false,
+        cryptoSetting,
+        cryptoMode: data.cryptoMode,
+        whiteListUrls: data.cryptoWhitePath,
+        // cbc加密模式的偏移量
+        iv,
+        key,
+      }, () => {});
+    },
+    hooks: {
+      'http:request': async (method: RequestMethod) => {
+        /**
+         * 如果X-Crypyto-Key存在 代表这是token过期后返回的接口，不需要再次加密
+         */
+        if (!method.config?.headers?.['X-Crypyto-Key'] && isMethodNeedCrypto(method.url, ctx.use().isCrypto, ctx.use().cryptoMode, ctx.use().whiteListUrls)) {
+          await encrypt(method, ctx.use().cryptoSetting);
+        }
+      },
+      'http:response': {
+        onSuccess: async (response: any) => {
+        // blob类型不解密
+          if (response.config?.responseType !== 'blob' && isMethodNeedCrypto(response.config.url, ctx.use().isCrypto, ctx.use().cryptoMode, ctx.use().whiteListUrls)) {
+            await decrypt(response, ctx.use().cryptoSetting);
+          }
+          return response;
+        },
+      },
+    },
+  };
+}
+
+export { setupAes } from './cryptoAlg/aes.ts';
+export { setupSm4Cbc } from './cryptoAlg/sm4-cbc.ts';
+export { setupSm4Ecb } from './cryptoAlg/sm4-ecb.ts';
+export * from './interface';

package/src/interface.ts

@@ -0,0 +1,21 @@
+import type { RequestInstance } from 'pubinfo';
+
+export interface CryptoOptions {
+  /**
+   * 接口请求实例
+   */
+  request: InternalContext['request']
+  cryptoSetting: cryptoInternal
+}
+
+export interface cryptoInternal {
+  name: string
+  encrypt: (text: string) => Promise<string>
+  decrypt: (text: string) => Promise<string>
+  header?: Record<string, string>
+};
+export interface InternalContext {
+  request: RequestInstance
+}
+
+export { RequestInstance };

package/src/pages/components/drawerCryptoUrl.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { useToggle } from '@vueuse/core';
+
+defineOptions({
+  name: 'DrawerCryptoUrl',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  url: [{ required: true, validator: checkUrl, trigger: ['blur', 'change'] }],
+};
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.UrlEntry>>({});
+const isEdit = ref(false);
+const tableList = ref<API.UrlEntry[]>([]);
+const tableIndex = ref<number>(0); ;
+
+function checkUrl(rule: any, value: any, callback: any) {
+  const urlReg = /^\/(?!.*\*{3})(?:[\w-]+|:\w+|\*{1,2})(?:\/(?:[\w-]+|:\w+|\*{1,2}))*$/;
+  if (!value) {
+    callback(new Error('请输入url'));
+  }
+  else if (!urlReg.test(value)) {
+    callback(new Error('url格式不正确'));
+  }
+  else {
+    callback();
+  }
+}
+
+async function onOpen(edit: boolean, list: API.UrlEntry[], index?: number) {
+  setOpen(true);
+  tableList.value = list || [];
+  tableIndex.value = index || 0;
+  if (edit) {
+    isEdit.value = true;
+    form.value = { ...list?.[index || 0] };
+  }
+  else {
+    isEdit.value = false;
+    form.value = {};
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = {
+      ...form.value,
+    };
+    if (isEdit.value) {
+      tableList.value[tableIndex.value] = params;
+    }
+    else {
+      tableList.value.push(params);
+    }
+    setLoading(false);
+    close();
+    emit('submit', tableList.value);
+  });
+}
+
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="url信息"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ style: { width: '90px' } }"
+    >
+      <a-form-item label="url地址" name="url" tooltip="支持url通配符，示例：/api/v1/user/*,/api/login/**">
+        <a-input v-model:value="form.url" :maxlength="200" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :rows="3"
+          show-count
+          :maxlength="200"
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/pages/enum.ts

@@ -0,0 +1,7 @@
+export enum ACTION {
+  ADD = '新增',
+  EDIT = '编辑',
+  REMOVE = '删除',
+  ENABLE = '启用',
+  DISABLE = '停用',
+}

package/src/pages/setting.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { UnwrapRef } from 'vue';
+import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+import { message, Modal } from 'ant-design-vue';
+import { reactive, ref } from 'vue';
+import { getCryptoGetCryptoConfig, postCryptoEditCryptoConfig } from '@/api/modules/crypto';
+import { ctx } from '@/context';
+import DrawerCryptoUrl from './components/drawerCryptoUrl.vue';
+import { ACTION } from './enum';
+
+interface FormState {
+  isCrypto: boolean
+  whiteListUrls?: API.UrlEntry[]
+  mode: boolean
+}
+
+const tableRef = ref();
+const formRef = ref();
+const drawerRef = ref();
+const labelCol = { style: { width: 'auto' } };
+const wrapperCol = { span: 24 };
+const { auth } = useAuth();
+
+const formState: UnwrapRef<FormState> = reactive({
+  isCrypto: true,
+  mode: true,
+  whiteListUrls: [],
+});
+
+const [loading, setLoading] = useToggle(false);
+onMounted(getCryptoConfig);
+
+async function getCryptoConfig() {
+  await getCryptoGetCryptoConfig().then((res) => {
+    setLoading(false);
+    if (res && res.data && res.success) {
+      formState.isCrypto = res.data.cryptoEnabled || false;
+      formState.whiteListUrls = res.data.cryptoWhitePath;
+      formState.mode = res.data.cryptoMode === undefined ? true : res.data.cryptoMode;
+    }
+  });
+}
+
+function handleChange(tag: boolean, checked: boolean) {
+  if (checked) {
+    formState.mode = tag;
+    onSubmit();
+  }
+}
+async function onSubmit() {
+  if (loading.value) {
+    return;
+  }
+  setLoading(true);
+  try {
+    await formRef.value?.validate();
+    const {
+      isCrypto,
+      mode,
+      whiteListUrls,
+    } = formState;
+
+    const params = {
+      cryptoEnabled: isCrypto,
+      cryptoMode: mode,
+      cryptoWhitePath: whiteListUrls,
+    };
+    const { success } = await postCryptoEditCryptoConfig({ json: JSON.stringify(params) });
+    if (success) {
+      message.success('配置更改成功');
+      ctx.callAsync({ ...ctx.use(), isCrypto: formState.isCrypto, cryptoMode: formState.mode, whiteListUrls: formState.whiteListUrls }, () => {
+        getCryptoConfig();
+      });
+    }
+  }
+  catch (error) {
+    setLoading(false);
+  }
+}
+
+const columns: ProColumns<API.UrlEntry> = [
+  {
+    minWidth: 60,
+    hideInTable: false,
+    title: 'url地址',
+    dataIndex: 'url',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 200,
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'crypto_url_add',
+        'crypto_url_edit',
+        'crypto_url_delete',
+      ]);
+    },
+  },
+];
+
+function onAction(key: string, index?: number): void {
+  if (loading.value) {
+    return;
+  }
+
+  switch (key) {
+    case ACTION.ADD:
+      drawerRef.value.open(false, formState.whiteListUrls);
+      break;
+    case ACTION.EDIT:
+      drawerRef.value.open(true, formState.whiteListUrls, index);
+      break;
+    case ACTION.REMOVE:
+      actionRemove(formState.whiteListUrls || [], index || 0);
+      break;
+  }
+}
+
+function actionRemove(list: API.UrlEntry[], index: number) {
+  Modal.confirm({
+    title: '删除',
+    content: `确定要删除该条数据吗？`,
+    async onOk() {
+      list.splice(index, 1);
+      getListData(list);
+    },
+  });
+}
+
+function getListData(list: API.UrlEntry[]) {
+  formState.whiteListUrls = list;
+  onSubmit();
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    pt-10px
+    px-10px
+    overflow-auto
+  >
+    <div h-full min-w-1130px>
+      <div
+        class="pt-20px pl-20px h-161px flex flex-col bg-[#ffffff] box-border bg-[url('@/assets/images/crypto-setting-bg.png')] bg-cover  text-[#4e5969] dark:text-[#C9CDD4]"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          class="safe-rule-form"
+        >
+          <a-form-item label="开启加密" name="isCrypto">
+            <a-switch
+              v-model:checked="formState.isCrypto" :disabled="loading"
+              @change="onSubmit"
+            />
+          </a-form-item>
+          <a-form-item label="模式" name="isCrypto">
+            <div class="flex items-center">
+              <div class="p-5px bg-[#f2f3f5] rounded-5px flex items-center">
+                <a-checkable-tag
+                  :checked="formState.mode"
+                  :disabled="loading"
+                  :class="loading ? 'cursor-not-allowed!' : ''"
+                  @change="(checked: boolean) => !loading && handleChange(true, checked)"
+                >
+                  白名单
+                </a-checkable-tag>
+                <a-checkable-tag
+                  :checked="!formState.mode"
+                  class="mr-0px!"
+                  :class="loading ? 'cursor-not-allowed!' : ''"
+                  @change="(checked: boolean) => !loading && handleChange(false, checked)"
+                >
+                  黑名单
+                </a-checkable-tag>
+              </div>
+              <div class="flex items-center ml-15px text-[#a3a4a8]">
+                <QuestionCircleOutlined class="mr-5px" />白名单模式下，仅不加密过滤列表中的接口；黑名单模式下，仅加密过滤列表中的接口。
+              </div>
+            </div>
+          </a-form-item>
+        </a-form>
+      </div>
+      <div class="h-[calc(100%-165px)]">
+        <ProTable
+          ref="tableRef"
+          row-key="id"
+          :data-source="formState.whiteListUrls"
+          :columns="columns"
+          auto-height
+          :search="false"
+          :pagination="false"
+          :scroll="{ x: 1000 }"
+        >
+          <template #toolbar>
+            <a-button
+              v-auth="'crypto_url_add'"
+              type="primary"
+              :disabled="loading"
+              @click="onAction(ACTION.ADD)"
+            >
+              <PlusCircleOutlined />
+              {{ ACTION.ADD }}
+            </a-button>
+          </template>
+          <template #bodyCell="{ column, index }">
+            <template v-if="column.dataIndex === 'action'">
+              <a-space>
+                <a
+                  v-auth="'crypto_url_edit'"
+                  class="flex items-center hover:opacity-80"
+                  @click="onAction(ACTION.EDIT, index)"
+                >
+                  <PubinfoIcon name="edit" class="text-base" />
+                  <span class="ml-4px">{{ ACTION.EDIT }}</span>
+                </a>
+                <span
+                  v-auth="'crypto_url_delete'"
+                  flex
+                  items-center
+                  text-red-500
+                  hover:cursor-pointer
+                  hover:text-red-500
+                  hover:opacity-80
+                  @click="onAction(ACTION.REMOVE, index)"
+                >
+                  <PubinfoIcon name="remove" class="text-base" />
+                  <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+                </span>
+              </a-space>
+            </template>
+          </template>
+        </ProTable>
+      </div>
+    </div>
+    <DrawerCryptoUrl
+      ref="drawerRef"
+      @submit="getListData"
+    />
+  </div>
+</template>
+
+<style scoped>
+.safe-rule-form .ant-input,
+.safe-rule-form .ant-select {
+  --at-apply: w-9/10;
+}
+.safe-rule-form :deep(.ant-tag-checkable-checked) {
+  background: #fff;
+  color: #1677ff;
+  font-size: 13px;
+  }
+.safe-rule-form :deep(.ant-tag-checkable) {
+  font-size: 13px;
+  }
+</style>