refactor: permission (#357)

* refactor: permission * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * fix: 修复`mix`混合模式导航在生产环境左侧菜单一定机率不显示的问题 * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
2025-11-03 13:44:47 +08:00 · 2022-10-25 12:17:13 +08:00
parent cedc84d31a
commit 6ef4cf9fb6
47 changed files with 605 additions and 386 deletions
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { cloneDeep } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
 import ElTreeLine from "/@/components/ReTreeLine";
 import { extractPathList, deleteChildren } from "@pureadmin/utils";
@@ -9,8 +10,9 @@ defineOptions({
  name: "LineTree"
 });

+let menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);
 let menusData = computed(() => {
-  return deleteChildren(usePermissionStoreHook().menusTree);
+  return deleteChildren(menusTree);
 });
 let expandedKeys = extractPathList(menusData.value);
 let dataProps = {
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { cloneDeep } from "lodash-unified";
 import type { ElTreeV2 } from "element-plus";
 import { transformI18n } from "/@/plugins/i18n";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
@@ -23,9 +24,10 @@ let dataProps = ref({
  children: "children"
 });
 const treeRef = ref<InstanceType<typeof ElTreeV2>>();
+let menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);

 let menusData = computed(() => {
-  return deleteChildren(usePermissionStoreHook().menusTree);
+  return deleteChildren(menusTree);
 });

 let expandedKeys = extractPathList(menusData.value);
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import {
+  ref,
+  reactive,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "vue";
 import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
@@ -12,7 +20,6 @@ import { initRouter } from "/@/router/utils";
 import { useNav } from "/@/layout/hooks/useNav";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
-import { storageSession } from "@pureadmin/utils";
 import { $t, transformI18n } from "/@/plugins/i18n";
 import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "/@/layout/hooks/useLayout";
@@ -22,14 +29,6 @@ import { ReImageVerify } from "/@/components/ReImageVerify";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
-import {
-  ref,
-  reactive,
-  watch,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "vue";

 import dayIcon from "/@/assets/svg/day.svg?component";
 import darkIcon from "/@/assets/svg/dark.svg?component";
@@ -38,6 +37,7 @@ import globalization from "/@/assets/svg/globalization.svg?component";
 defineOptions({
  name: "Login"
 });
+
 const imgCode = ref("");
 const router = useRouter();
 const loading = ref(false);
@@ -47,11 +47,11 @@ const currentPage = computed(() => {
  return useUserStoreHook().currentPage;
 });

+const { t } = useI18n();
 const { initStorage } = useLayout();
 initStorage();
-
-const { t } = useI18n();
 const { dataTheme, dataThemeChange } = useDataThemeChange();
+dataThemeChange();
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();

@@ -66,17 +66,17 @@ const onLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
-      // 模拟请求，需根据实际开发进行修改
-      setTimeout(() => {
-        loading.value = false;
-        storageSession.setItem("info", {
-          username: "admin",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+      useUserStoreHook()
+        .loginByUsername({ username: ruleForm.username })
+        .then(res => {
+          if (res.success) {
+            // 获取后端路由
+            initRouter().then(() => {
+              message.success("登录成功");
+              router.push("/");
+            });
+          }
        });
-        initRouter("admin").then(() => {});
-        message.success("登录成功");
-        router.push("/");
-      }, 2000);
    } else {
      loading.value = false;
      return fields;
@@ -84,16 +84,6 @@ const onLogin = async (formEl: FormInstance | undefined) => {
  });
 };

-function onHandle(value) {
-  useUserStoreHook().SET_CURRENTPAGE(value);
-}
-
-watch(imgCode, value => {
-  useUserStoreHook().SET_VERIFYCODE(value);
-});
-
-dataThemeChange();
-
 /** 使用公共函数，避免`removeEventListener`失效 */
 function onkeypress({ code }: KeyboardEvent) {
  if (code === "Enter") {
@@ -108,6 +98,10 @@ onMounted(() => {
 onBeforeUnmount(() => {
  window.document.removeEventListener("keypress", onkeypress);
 });
+
+watch(imgCode, value => {
+  useUserStoreHook().SET_VERIFYCODE(value);
+});
 </script>

 <template>
@@ -258,7 +252,7 @@ onBeforeUnmount(() => {
                    :key="index"
                    class="w-full mt-4"
                    size="default"
-                    @click="onHandle(index + 1)"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
                  >
                    {{ t(item.title) }}
                  </el-button>
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -1,36 +1,80 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import type { StorageConfigs } from "/#/index";
-import { storageSession } from "@pureadmin/utils";
+import { type CSSProperties, computed } from "vue";
+import { hasAuth, getAuths } from "/@/router/utils";

 defineOptions({
  name: "PermissionButton"
 });

-const auth = ref(
-  storageSession.getItem<StorageConfigs>("info").username || "admin"
-);
-
-function changRole(value) {
-  storageSession.setItem("info", {
-    username: value,
-    accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
-  });
-  window.location.reload();
-}
+let width = computed((): CSSProperties => {
+  return {
+    width: "85vw"
+  };
+});
 </script>

 <template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <el-radio-group v-model="auth" @change="changRole">
-          <el-radio-button label="admin" />
-          <el-radio-button label="test" />
-        </el-radio-group>
-      </div>
-    </template>
-    <p v-auth="'v-admin'">只有admin可看</p>
-    <p v-auth="'v-test'">只有test可看</p>
-  </el-card>
+  <el-space direction="vertical" size="large">
+    <el-tag :style="width" size="large" effect="dark">
+      当前拥有的code列表：{{ getAuths() }}
+    </el-tag>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">组件方式判断权限</div>
+      </template>
+      <Auth value="btn_add">
+        <el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
+      </Auth>
+      <Auth :value="['btn_edit']">
+        <el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
+      </Auth>
+      <Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
+        <el-button type="danger">
+          拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+        </el-button>
+      </Auth>
+    </el-card>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">函数方式判断权限</div>
+      </template>
+      <el-button type="success" v-if="hasAuth('btn_add')">
+        拥有code：'btn_add' 权限可见
+      </el-button>
+      <el-button type="primary" v-if="hasAuth(['btn_edit'])">
+        拥有code：['btn_edit'] 权限可见
+      </el-button>
+      <el-button
+        type="danger"
+        v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
+      >
+        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+      </el-button>
+    </el-card>
+
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">
+          指令方式判断权限（该方式不能动态修改权限）
+        </div>
+      </template>
+      <el-button type="success" v-auth="'btn_add'">
+        拥有code：'btn_add' 权限可见
+      </el-button>
+      <el-button type="primary" v-auth="['btn_edit']">
+        拥有code：['btn_edit'] 权限可见
+      </el-button>
+      <el-button type="danger" v-auth="['btn_add', 'btn_edit', 'btn_delete']">
+        拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
+      </el-button>
+    </el-card>
+  </el-space>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-tag) {
+  justify-content: start;
+}
+</style>
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -1,53 +1,69 @@
 <script setup lang="ts">
-import { ref, unref } from "vue";
-import type { StorageConfigs } from "/#/index";
-import { storageSession } from "@pureadmin/utils";
-import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { initRouter } from "/@/router/utils";
+import { type CSSProperties, ref, computed } from "vue";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { usePermissionStoreHook } from "/@/store/modules/permission";

 defineOptions({
  name: "PermissionPage"
 });

-let purview = ref<string>(
-  storageSession.getItem<StorageConfigs>("info").username
-);
+let width = computed((): CSSProperties => {
+  return {
+    width: "85vw"
+  };
+});

-function changRole() {
-  if (unref(purview) === "admin") {
-    storageSession.setItem("info", {
-      username: "test",
-      accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-    });
-    window.location.reload();
-  } else {
-    storageSession.setItem("info", {
-      username: "admin",
-      accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
-    });
-    window.location.reload();
+let username = ref(useUserStoreHook()?.username);
+
+const options = [
+  {
+    value: "admin",
+    label: "管理员角色"
+  },
+  {
+    value: "common",
+    label: "普通角色"
  }
+];
+
+function onChange() {
+  useUserStoreHook()
+    .loginByUsername({ username: username.value })
+    .then(res => {
+      if (res.success) {
+        usePermissionStoreHook().clearAllCachePage();
+        initRouter();
+      }
+    });
 }
 </script>

 <template>
-  <el-card>
-    <template #header>
-      <div class="card-header">
-        <span>
-          当前角色：
-          <span style="font-size: 26px">{{ purview }}</span>
-          <p style="color: #ffa500">
-            查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
-          </p>
-        </span>
-      </div>
-    </template>
-    <el-button
-      type="primary"
-      @click="changRole"
-      :icon="useRenderIcon('user', { color: '#fff' })"
-    >
-      切换角色
-    </el-button>
-  </el-card>
+  <el-space direction="vertical" size="large">
+    <el-tag :style="width" size="large" effect="dark">
+      模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
+    </el-tag>
+    <el-card shadow="never" :style="width">
+      <template #header>
+        <div class="card-header">
+          <span>当前角色：{{ username }}</span>
+        </div>
+      </template>
+      <el-select v-model="username" @change="onChange">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-card>
+  </el-space>
 </template>
+
+<style lang="scss" scoped>
+:deep(.el-tag) {
+  justify-content: start;
+}
+</style>
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { cloneDeep } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
 import { TreeSelect } from "@pureadmin/components";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
@@ -16,13 +17,12 @@ defineOptions({
 });

 const { toDetail, router } = useDetail();
+let menusTree = cloneDeep(usePermissionStoreHook().wholeMenus);

 let treeData = computed(() => {
-  return appendFieldByUniqueId(
-    deleteChildren(usePermissionStoreHook().menusTree),
-    0,
-    { disabled: true }
-  );
+  return appendFieldByUniqueId(deleteChildren(menusTree), 0, {
+    disabled: true
+  });
 });

 const value = ref<string[]>([]);