新增：新增功能权限适配及校验

1.后端 API 注解鉴权使用方式：@SaCheckPermission("system:user:add") 2.前端全局指令函数使用方式：v-permission="['system:user:add']" 3.前端权限判断函数使用方式：checkPermission(['system:user:add'])
2025-10-29 14:57:10 +08:00 · 2023-03-02 23:39:22 +08:00
parent 843cac4e54
commit 94be1f9553
51 changed files with 548 additions and 149 deletions
--- a/continew-admin-ui/src/components/message-box/locale/en-US.ts
+++ b/continew-admin-ui/src/components/message-box/locale/en-US.ts
@@ -6,7 +6,6 @@ export default {
  'messageBox.allRead': 'All Read',
  'messageBox.viewMore': 'View More',
  'messageBox.noContent': 'No Content',
-  'messageBox.switchRoles': 'Switch Roles',
  'messageBox.userCenter': 'User Center',
  'messageBox.logout': 'Logout',
 };
--- a/continew-admin-ui/src/components/message-box/locale/zh-CN.ts
+++ b/continew-admin-ui/src/components/message-box/locale/zh-CN.ts
@@ -6,7 +6,6 @@ export default {
  'messageBox.allRead': '全部已读',
  'messageBox.viewMore': '查看更多',
  'messageBox.noContent': '暂无内容',
-  'messageBox.switchRoles': '切换角色',
  'messageBox.userCenter': '个人中心',
  'messageBox.logout': '退出登录',
 };
--- a/continew-admin-ui/src/components/navbar/index.vue
+++ b/continew-admin-ui/src/components/navbar/index.vue
@@ -150,14 +150,6 @@
            <img alt="avatar" :src="getAvatar(loginStore.avatar, loginStore.gender)" />
          </a-avatar>
          <template #content>
-            <a-doption>
-              <a-space @click="switchRoles">
-                <icon-tag />
-                <span>
-                  {{ $t('messageBox.switchRoles') }}
-                </span>
-              </a-space>
-            </a-doption>
            <a-doption>
              <a-space @click="$router.push({ name: 'UserCenter' })">
                <icon-settings />
@@ -183,7 +175,6 @@

 <script lang="ts" setup>
  import { computed, ref, inject } from 'vue';
-  import { Message } from '@arco-design/web-vue';
  import { useDark, useToggle, useFullscreen } from '@vueuse/core';
  import { useAppStore, useLoginStore } from '@/store';
  import { LOCALE_OPTIONS } from '@/locale';
@@ -242,10 +233,6 @@
    });
    triggerBtn.value.dispatchEvent(event);
  };
-  const switchRoles = async () => {
-    const res = await loginStore.switchRoles();
-    Message.success(res as string);
-  };
  const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
 </script>

--- a/continew-admin-ui/src/directive/permission/index.ts
+++ b/continew-admin-ui/src/directive/permission/index.ts
@@ -4,19 +4,30 @@ import { useLoginStore } from '@/store';
 function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const loginStore = useLoginStore();
-  const { role } = loginStore;
+  const { permissions, roles } = loginStore;
+  const superAdmin = 'admin';
+  const allPermission = '*';

-  if (Array.isArray(value)) {
-    if (value.length > 0) {
-      const permissionValues = value;
-
-      const hasPermission = permissionValues.includes(role);
-      if (!hasPermission && el.parentNode) {
-        el.parentNode.removeChild(el);
-      }
+  if (Array.isArray(value) && value.length > 0) {
+    const permissionValues = value;
+    // 校验权限码
+    const hasPermission = permissions.some((permission: string) => {
+      return (
+        allPermission === permission || permissionValues.includes(permission)
+      );
+    });
+    // 检验角色编码
+    const hasRole = roles.some((role: string) => {
+      return superAdmin === role || permissionValues.includes(role);
+    });
+    // 如果没有权限，移除元素
+    if (!hasPermission && !hasRole && el.parentNode) {
+      el.parentNode.removeChild(el);
    }
  } else {
-    throw new Error(`need roles! Like v-permission="['admin','user']"`);
+    throw new Error(
+      `need roles! Like v-permission="['admin','system:user:add']"`
+    );
  }
 }

--- a/continew-admin-ui/src/hooks/permission.ts
+++ b/continew-admin-ui/src/hooks/permission.ts
@@ -9,7 +9,7 @@ export default function usePermission() {
        !route.meta?.requiresAuth ||
        !route.meta?.roles ||
        route.meta?.roles?.includes('*') ||
-        route.meta?.roles?.includes(loginStore.role)
+        route.meta?.roles?.includes(loginStore.roles[0])
      );
    },
    findFirstPermissionRoute(_routers: any, role = 'admin') {
--- a/continew-admin-ui/src/layout/default-layout.vue
+++ b/continew-admin-ui/src/layout/default-layout.vue
@@ -88,7 +88,7 @@
    appStore.updateSettings({ menuCollapse: val });
  };
  watch(
-    () => loginStore.role,
+    () => loginStore.roles,
    (roleValue) => {
      if (roleValue && !permission.accessRouter(route))
        router.push({ name: 'notFound' });
--- a/continew-admin-ui/src/router/guard/permission.ts
+++ b/continew-admin-ui/src/router/guard/permission.ts
@@ -45,7 +45,7 @@ export default function setupPermissionGuard(router: Router) {
      if (permissionsAllow) next();
      else {
        const destination =
-          Permission.findFirstPermissionRoute(appRoutes, loginStore.role) ||
+          Permission.findFirstPermissionRoute(appRoutes, loginStore.roles[0]) ||
          NOT_FOUND;
        next(destination);
      }
--- a/continew-admin-ui/src/router/guard/userLoginInfo.ts
+++ b/continew-admin-ui/src/router/guard/userLoginInfo.ts
@@ -9,7 +9,7 @@ export default function setupUserLoginInfoGuard(router: Router) {
    NProgress.start();
    const loginStore = useLoginStore();
    if (isLogin()) {
-      if (loginStore.role) {
+      if (loginStore.roles[0]) {
        next();
      } else {
        try {
--- a/continew-admin-ui/src/router/routes/modules/arco-design/exception.ts
+++ b/continew-admin-ui/src/router/routes/modules/arco-design/exception.ts
@@ -19,7 +19,7 @@ const EXCEPTION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.exception.403',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
    {
--- a/continew-admin-ui/src/router/routes/modules/arco-design/form.ts
+++ b/continew-admin-ui/src/router/routes/modules/arco-design/form.ts
@@ -19,7 +19,7 @@ const FORM: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.form.step',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
    {
@@ -29,7 +29,7 @@ const FORM: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.form.group',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
  ],
--- a/continew-admin-ui/src/router/routes/modules/arco-design/profile.ts
+++ b/continew-admin-ui/src/router/routes/modules/arco-design/profile.ts
@@ -19,7 +19,7 @@ const PROFILE: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.profile.basic',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
  ],
--- a/continew-admin-ui/src/router/routes/modules/arco-design/result.ts
+++ b/continew-admin-ui/src/router/routes/modules/arco-design/result.ts
@@ -19,7 +19,7 @@ const RESULT: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.result.success',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
    {
@@ -29,7 +29,7 @@ const RESULT: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.result.error',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
  ],
--- a/continew-admin-ui/src/router/routes/modules/arco-design/visualization.ts
+++ b/continew-admin-ui/src/router/routes/modules/arco-design/visualization.ts
@@ -19,7 +19,7 @@ const VISUALIZATION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.visualization.dataAnalysis',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
    {
@@ -30,7 +30,7 @@ const VISUALIZATION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.visualization.multiDimensionDataAnalysis',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
    {
@@ -40,7 +40,7 @@ const VISUALIZATION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.dashboard.monitor',
        requiresAuth: true,
-        roles: ['admin'],
+        roles: ['*'],
      },
    },
  ],
--- a/continew-admin-ui/src/store/modules/login/index.ts
+++ b/continew-admin-ui/src/store/modules/login/index.ts
@@ -25,14 +25,8 @@ const useLoginStore = defineStore('user', {
    registrationDate: undefined,
    deptId: 0,
    deptName: '',
-
-    job: 'backend',
-    jobName: '后端艺术家',
-    location: 'beijing',
-    locationName: '北京',
-    introduction: '低调星人',
-    personalWebsite: 'https://blog.charles7c.top',
-    role: '',
+    permissions: [],
+    roles: [],
  }),

  getters: {
@@ -87,14 +81,6 @@ const useLoginStore = defineStore('user', {
    resetInfo() {
      this.$reset();
    },
-
-    // 切换角色
-    switchRoles() {
-      return new Promise((resolve) => {
-        this.role = this.role === 'user' ? 'admin' : 'user';
-        resolve(this.role);
-      });
-    },
  },
 });

--- a/continew-admin-ui/src/store/modules/login/types.ts
+++ b/continew-admin-ui/src/store/modules/login/types.ts
@@ -1,4 +1,3 @@
-export type RoleType = '' | '*' | 'admin' | 'user';
 export interface UserState {
  userId: number;
  username: string;
@@ -12,12 +11,6 @@ export interface UserState {
  registrationDate?: string;
  deptId?: number;
  deptName?: string;
-
-  job?: string;
-  jobName?: string;
-  location?: string;
-  locationName?: string;
-  introduction?: string;
-  personalWebsite?: string;
-  role: RoleType;
+  permissions: Array<string>;
+  roles: Array<string>;
 }
--- a/continew-admin-ui/src/utils/permission.ts
+++ b/continew-admin-ui/src/utils/permission.ts
@@ -0,0 +1,32 @@
+import { useLoginStore } from '@/store';
+
+/**
+ * 权限判断
+ *
+ * @param value 权限码列表
+ * @return true 有权限，false 没有权限
+ */
+export default function checkPermission(value: Array<string>) {
+  const loginStore = useLoginStore();
+  const { permissions, roles } = loginStore;
+  const superAdmin = 'admin';
+  const allPermission = '*';
+
+  if (Array.isArray(value) && value.length > 0) {
+    const permissionValues = value;
+    // 校验权限码
+    const hasPermission = permissions.some((permission: string) => {
+      return (
+        allPermission === permission || permissionValues.includes(permission)
+      );
+    });
+    // 检验角色编码
+    const hasRole = roles.some((role: string) => {
+      return superAdmin === role || permissionValues.includes(role);
+    });
+    return hasPermission || hasRole;
+  }
+  throw new Error(
+    `need roles! Like v-permission="['admin','system:user:add']"`
+  );
+}
--- a/continew-admin-ui/src/views/monitor/log/system/index.vue
+++ b/continew-admin-ui/src/views/monitor/log/system/index.vue
@@ -74,10 +74,10 @@
          <a-table-column title="创建时间" data-index="createTime" />
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
-              <a-button v-permission="['admin']" type="text" size="small" title="查看详情" @click="toDetail(record.logId)">
+              <a-button type="text" size="small" title="查看详情" @click="toDetail(record.logId)">
                <template #icon><icon-eye /></template>详情
              </a-button>
-              <a-button v-if="record.exceptionDetail" v-permission="['admin']" type="text" size="small" title="查看异常详情" @click="toExceptionDetail(record)">
+              <a-button v-if="record.exceptionDetail" type="text" size="small" title="查看异常详情" @click="toExceptionDetail(record)">
                <template #icon><icon-bug /></template>异常
              </a-button>
            </template>
--- a/continew-admin-ui/src/views/monitor/online/index.vue
+++ b/continew-admin-ui/src/views/monitor/online/index.vue
@@ -70,7 +70,7 @@
            <template #cell="{ record }">
              <a-popconfirm content="确定要强退该用户吗？" type="warning" @ok="handleKickout(record.token)">
                <a-button
-                  v-permission="['admin']"
+                  v-permission="['monitor:online:user:delete']"
                  type="text"
                  size="small"
                  :disabled="currentToken === record.token"
--- a/continew-admin-ui/src/views/system/dept/index.vue
+++ b/continew-admin-ui/src/views/system/dept/index.vue
@@ -42,10 +42,15 @@
          <a-row>
            <a-col :span="12">
              <a-space>
-                <a-button type="primary" @click="toAdd">
+                <a-button
+                  v-permission="['system:dept:add']"
+                  type="primary"
+                  @click="toAdd"
+                >
                  <template #icon><icon-plus /></template>新增
                </a-button>
                <a-button
+                  v-permission="['system:dept:update']"
                  type="primary"
                  status="success"
                  :disabled="single"
@@ -55,6 +60,7 @@
                  <template #icon><icon-edit /></template>修改
                </a-button>
                <a-button
+                  v-permission="['system:dept:delete']"
                  type="primary"
                  status="danger"
                  :disabled="multiple"
@@ -64,6 +70,7 @@
                  <template #icon><icon-delete /></template>删除
                </a-button>
                <a-button
+                  v-permission="['system:dept:export']"
                  :loading="exportLoading"
                  type="primary"
                  status="warning"
@@ -122,6 +129,7 @@
                v-model="record.status"
                :checked-value="1"
                :unchecked-value="2"
+                :disabled="!checkPermission(['system:dept:update'])"
                @change="handleChangeStatus(record)"
              />
            </template>
@@ -132,7 +140,7 @@
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-button
-                v-permission="['admin']"
+                v-permission="['system:dept:update']"
                type="text"
                size="small"
                title="修改"
@@ -146,7 +154,7 @@
                @ok="handleDelete([record.deptId])"
              >
                <a-button
-                  v-permission="['admin']"
+                  v-permission="['system:dept:delete']"
                  type="text"
                  size="small"
                  title="删除"
@@ -293,6 +301,7 @@
    deleteDept,
  } from '@/api/system/dept';
  import { listDeptTree } from '@/api/common';
+  import checkPermission from '@/utils/permission';

  const { proxy } = getCurrentInstance() as any;
  const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');
--- a/continew-admin-ui/src/views/system/menu/index.vue
+++ b/continew-admin-ui/src/views/system/menu/index.vue
@@ -42,10 +42,15 @@
          <a-row>
            <a-col :span="12">
              <a-space>
-                <a-button type="primary" @click="toAdd">
+                <a-button
+                  v-permission="['system:menu:add']"
+                  type="primary"
+                  @click="toAdd"
+                >
                  <template #icon><icon-plus /></template>新增
                </a-button>
                <a-button
+                  v-permission="['system:menu:update']"
                  type="primary"
                  status="success"
                  :disabled="single"
@@ -55,6 +60,7 @@
                  <template #icon><icon-edit /></template>修改
                </a-button>
                <a-button
+                  v-permission="['system:menu:delete']"
                  type="primary"
                  status="danger"
                  :disabled="multiple"
@@ -64,6 +70,7 @@
                  <template #icon><icon-delete /></template>删除
                </a-button>
                <a-button
+                  v-permission="['system:menu:export']"
                  :loading="exportLoading"
                  type="primary"
                  status="warning"
@@ -122,6 +129,7 @@
                v-model="record.status"
                :checked-value="1"
                :unchecked-value="2"
+                :disabled="!checkPermission(['system:menu:update'])"
                @change="handleChangeStatus(record)"
              />
            </template>
@@ -148,7 +156,7 @@
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-button
-                v-permission="['admin']"
+                v-permission="['system:menu:update']"
                type="text"
                size="small"
                title="修改"
@@ -162,7 +170,7 @@
                @ok="handleDelete([record.menuId])"
              >
                <a-button
-                  v-permission="['admin']"
+                  v-permission="['system:menu:delete']"
                  type="text"
                  size="small"
                  title="删除"
@@ -346,6 +354,7 @@
    deleteMenu,
  } from '@/api/system/menu';
  import { listMenuTree } from '@/api/common';
+  import checkPermission from '@/utils/permission';

  const { proxy } = getCurrentInstance() as any;
  const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');
--- a/continew-admin-ui/src/views/system/role/index.vue
+++ b/continew-admin-ui/src/views/system/role/index.vue
@@ -42,10 +42,15 @@
          <a-row>
            <a-col :span="12">
              <a-space>
-                <a-button type="primary" @click="toAdd">
+                <a-button
+                  v-permission="['system:role:add']"
+                  type="primary"
+                  @click="toAdd"
+                >
                  <template #icon><icon-plus /></template>新增
                </a-button>
                <a-button
+                  v-permission="['system:role:update']"
                  type="primary"
                  status="success"
                  :disabled="single"
@@ -55,6 +60,7 @@
                  <template #icon><icon-edit /></template>修改
                </a-button>
                <a-button
+                  v-permission="['system:role:delete']"
                  type="primary"
                  status="danger"
                  :disabled="multiple"
@@ -64,6 +70,7 @@
                  <template #icon><icon-delete /></template>删除
                </a-button>
                <a-button
+                  v-permission="['system:role:export']"
                  :loading="exportLoading"
                  type="primary"
                  status="warning"
@@ -137,7 +144,7 @@
                v-model="record.status"
                :checked-value="1"
                :unchecked-value="2"
-                :disabled="record.disabled"
+                :disabled="record.disabled || !checkPermission(['system:role:update'])"
                @change="handleChangeStatus(record)"
              />
            </template>
@@ -148,7 +155,7 @@
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-button
-                v-permission="['admin']"
+                v-permission="['system:role:update']"
                type="text"
                size="small"
                title="修改"
@@ -163,7 +170,7 @@
                @ok="handleDelete([record.roleId])"
              >
                <a-button
-                  v-permission="['admin']"
+                  v-permission="['system:role:delete']"
                  type="text"
                  size="small"
                  title="删除"
@@ -389,9 +396,13 @@
    deleteRole,
  } from '@/api/system/role';
  import { listMenuTree, listDeptTree } from '@/api/common';
+  import checkPermission from '@/utils/permission';

  const { proxy } = getCurrentInstance() as any;
-  const { DataScopeEnum, DisEnableStatusEnum } = proxy.useDict('DataScopeEnum', 'DisEnableStatusEnum');
+  const { DataScopeEnum, DisEnableStatusEnum } = proxy.useDict(
+    'DataScopeEnum',
+    'DisEnableStatusEnum'
+  );

  const roleList = ref<RoleRecord[]>([]);
  const role = ref<RoleRecord>({
@@ -572,7 +583,9 @@

    // 获取半选中的菜单
    const halfCheckedNodes = proxy.$refs.menuRef.getHalfCheckedNodes();
-    const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key);
+    const halfCheckedKeys = halfCheckedNodes.map(
+      (item: TreeNodeData) => item.key
+    );
    // eslint-disable-next-line prefer-spread
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
    return checkedKeys;
@@ -582,13 +595,18 @@
   * 获取所有选中的部门
   */
  const getDeptAllCheckedKeys = () => {
+    if (!proxy.$refs.deptRef) {
+      return [];
+    }
    // 获取目前被选中的部门
    const checkedNodes = proxy.$refs.deptRef.getCheckedNodes();
    const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key);

    // 获取半选中的部门
    const halfCheckedNodes = proxy.$refs.deptRef.getHalfCheckedNodes();
-    const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key);
+    const halfCheckedKeys = halfCheckedNodes.map(
+      (item: TreeNodeData) => item.key
+    );
    // eslint-disable-next-line prefer-spread
    checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
    return checkedKeys;
--- a/continew-admin-ui/src/views/system/user/index.vue
+++ b/continew-admin-ui/src/views/system/user/index.vue
@@ -62,10 +62,15 @@
              <a-row>
                <a-col :span="12">
                  <a-space>
-                    <a-button type="primary" @click="toAdd">
+                    <a-button
+                      v-permission="['system:user:add']"
+                      type="primary"
+                      @click="toAdd"
+                    >
                      <template #icon><icon-plus /></template>新增
                    </a-button>
                    <a-button
+                      v-permission="['system:user:update']"
                      type="primary"
                      status="success"
                      :disabled="single"
@@ -75,6 +80,7 @@
                      <template #icon><icon-edit /></template>修改
                    </a-button>
                    <a-button
+                      v-permission="['system:user:delete']"
                      type="primary"
                      status="danger"
                      :disabled="multiple"
@@ -84,6 +90,7 @@
                      <template #icon><icon-delete /></template>删除
                    </a-button>
                    <a-button
+                      v-permission="['system:user:export']"
                      :loading="exportLoading"
                      type="primary"
                      status="warning"
@@ -166,7 +173,7 @@
                    v-model="record.status"
                    :checked-value="1"
                    :unchecked-value="2"
-                    :disabled="record.disabled"
+                    :disabled="record.disabled || !checkPermission(['system:user:update'])"
                    @change="handleChangeStatus(record)"
                  />
                </template>
@@ -186,7 +193,7 @@
              >
                <template #cell="{ record }">
                  <a-button
-                    v-permission="['admin']"
+                    v-permission="['system:user:update']"
                    type="text"
                    size="small"
                    title="修改"
@@ -200,7 +207,7 @@
                    @ok="handleDelete([record.userId])"
                  >
                    <a-button
-                      v-permission="['admin']"
+                      v-permission="['system:user:delete']"
                      type="text"
                      size="small"
                      title="删除"
@@ -215,7 +222,7 @@
                    @ok="handleResetPassword(record.userId)"
                  >
                    <a-button
-                      v-permission="['admin']"
+                      v-permission="['system:user:password:reset']"
                      type="text"
                      size="small"
                      title="重置密码"
@@ -224,7 +231,7 @@
                    </a-button>
                  </a-popconfirm>
                  <a-button
-                    v-permission="['admin']"
+                    v-permission="['system:user:role:update']"
                    type="text"
                    size="small"
                    title="分配角色"
@@ -475,6 +482,7 @@
  import { listDeptTree, listRoleDict } from '@/api/common';
  import { LabelValueState } from '@/store/modules/dict/types';
  import getAvatar from '@/utils/avatar';
+  import checkPermission from '@/utils/permission';

  const { proxy } = getCurrentInstance() as any;
  const { DisEnableStatusEnum } = proxy.useDict('DisEnableStatusEnum');