fix: 多次调用tree ,权限不重新到页面

src/main.ts

@@ -12,13 +12,13 @@ import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 import VxeUITable from 'vxe-table'
 import 'vxe-table/lib/style.css'
-
 const a = createApp(App)
-
+import { useAdminStore } from '../src/store'
 // 全局注册 ElementPlus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   a.component(key, component)
 }
+const pinia = createPinia()
 
 // 使用 ElementPlus 和路由器
 a.use(ElementPlus, {
@@ -27,8 +27,12 @@ a.use(ElementPlus, {
   .use(router)
   .use(VxeUI)
   .use(VxeUITable)
-  .use(createPinia())
+  .use(pinia)
   .mount('#app')
 
+// 恢复localStorage数据
+const adminStore = useAdminStore()
+adminStore.initFromLocalStorage()
+
 // 注册 JsonExcel 组件
 a.component('downloadExcel', JsonExcel)

src/router/index.js

@@ -1,17 +1,11 @@
 import {createRouter, createWebHashHistory} from 'vue-router';
 import axios from "axios";
-import request from "@/util/http.js";
-import {ref} from "vue";
+import {storeToRefs} from "pinia";
+import {useAdminStore} from "@/store/index.js";
+
 
 // 路由定义（包含权限映射 meta.permissionId）
 const routes = [
-    // {
-
-    //     path: '/workspace',
-    //     name: "workspace",
-    //     component: () => import("../views/workspace/audit.vue"),
-    //     meta: { permissionId: 10 } // 对应"工作台展示"id=10
-    // },
     {
         path: '/',
         redirect: "/login"
@@ -43,7 +37,7 @@ const routes = [
                 meta: {permissionId: 40},
                 // redirect: '/index',
                 children: [
-                    // 充值审核========================================
+                    // 充值审核
                     {
                         path: 'rechargeAudit',
                         name: "rechargeAudit",
@@ -61,7 +55,6 @@ const routes = [
             },
 
 
-
             // 金币消耗
             {
                 path: '/coinConsume',
@@ -229,26 +222,14 @@ const getAllPermissionIds = (menuTree) => {
     return permissionIds;
 };
 
-// 存储管理员信息（全局可访问）
-const adminData = ref(null);
 
-// 获取管理员信息（返回Promise，方便路由守卫中使用）
-export const getAdminData = async function () {
-    try {
-        const result = await request({
-            url: "/admin/userinfo",
-
-        });
-        adminData.value = result; // 存储管理员信息（包含roleId）
-        return result; // 返回结果，供路由守卫使用
-    } catch (error) {
-        console.log("获取管理员信息失败", error);
-        throw error; // 抛出错误，让路由守卫捕获
-    }
-};
 
 // 全局路由守卫
 router.beforeEach(async (to, from, next) => {
+
+    const adminStore = useAdminStore()
+    const { adminData, menuTree } = storeToRefs(adminStore)
+
     const token = localStorage.getItem("token");
     const machineId = localStorage.getItem("machineId");
 
@@ -265,41 +246,28 @@ router.beforeEach(async (to, from, next) => {
         let roleId = null;
         console.log('adminData:', adminData)
         try {
-            await getAdminData(); // 等待管理员信息获取完成
             roleId = adminData.value.roleId;
             if (!roleId) {
-                throw new Error("未获取到roleId");
+                localStorage.removeItem('token'); // 清除token，强制重新登录
+                next(`/login?machineId=${machineId || ''}`);
+                return;
             }
         } catch (error) {
             localStorage.removeItem('token'); // 清除token，强制重新登录
+            adminStore.clearState()
             next(`/login?machineId=${machineId || ''}`);
             return;
         }
 
 
         let userPermissionIds = [];
-        try {
-            const response = await request( {url: "/menu/tree",
-                data:{id: roleId}
-            });
-            console.log('roleId:', roleId)
-            console.log('response:', response)
-            console.log('userPermissionIds:', userPermissionIds)
-            if (response.code === 200 && response.data) {
-                userPermissionIds = getAllPermissionIds(response.data); // 提取权限id
-                console.log('userPermissionIds:', userPermissionIds)
-            }
-        } catch (error) {
-            console.error('获取菜单树失败：', error);
-            localStorage.removeItem('token');
-            next(`/login?machineId=${machineId || ''}`);
-            return;
-        }
+
+        // 拿权限id
+        userPermissionIds = getAllPermissionIds(menuTree.value)
 
         // 2.4 权限验证（逻辑不变）
         console.log('to.meta:', to.meta)
 
-
         const requiresPermission = to.meta && to.meta.permissionId;
         if (requiresPermission) {
             const hasPermission = Array.isArray(requiresPermission)

src/store/index.js

@@ -0,0 +1,45 @@
+// src/store/index.js
+import { defineStore } from 'pinia'
+
+export const useAdminStore = defineStore('admin', {
+    state: () => ({
+        adminData: null, // 用户信息
+        menuTree: null, // 菜单权限树
+    }),
+    actions: {
+        // 设置用户信息并同步到localStorage
+        setAdminData(info) {
+            this.adminData = info
+            localStorage.setItem('adminData', JSON.stringify(info))
+        },
+
+        // 设置菜单树并同步到localStorage
+        setMenuTree(tree) {
+            this.menuTree = tree
+            localStorage.setItem('menuTree', JSON.stringify(tree))
+        },
+
+        // 从localStorage初始化数据
+        initFromLocalStorage() {
+            const adminData = localStorage.getItem('adminData')
+            const menuTree = localStorage.getItem('menuTree')
+
+            if (adminData) {
+                this.adminData = JSON.parse(adminData)
+            }
+
+            if (menuTree) {
+                this.menuTree = JSON.parse(menuTree)
+            }
+        },
+
+        // 清空状态并移除localStorage数据
+        clearState() {
+            this.adminData = null
+            this.menuTree = null
+            localStorage.removeItem('adminData')
+            localStorage.removeItem('menuTree')
+            // localStorage.removeItem('token')
+        }
+    }
+})

src/utils/menuUtils.js

@@ -0,0 +1,61 @@
+// 菜单树过滤 (展示的? )
+export function filterMenu(menuList) {
+    return menuList
+        // 过滤不是4级的 123 为菜单
+        .filter(menu => menu.menuType !== 4)
+        .map(menu => ({
+            ...menu,
+            children: menu.children ? filterMenu(menu.children) : []
+        }))
+        .sort((a, b) => a.priority - b.priority); // 按 id 升序
+}
+
+// 辅助函数：查找第一个可访问的菜单项
+export function findFirstAccessibleMenu(menuList) {
+    if (!menuList || menuList.length === 0) return null
+
+    for (const menu of menuList) {
+        if (menu.menuType === 1) { // 根
+            const childResult = findFirstAccessibleMenu(menu.children)
+            if (childResult) return childResult
+        } else if (menu.menuType === 2) { // 目录
+            return menu
+        } else if (menu.menuType === 3) { // 菜单
+            return menu
+        }
+    }
+    return null
+}
+
+// 路由映射
+export const getRoutePath = (menu) => {
+    // 路由映射表：key为接口menuName，value为对应路由路径
+    const routeMap = {
+        '工作台': '/workspace',
+
+        '审核页面': '/audit',
+        '财务审核': '/audit',
+
+        '充值审核': '/audit/rechargeAudit',
+        '退款审核': '/audit/refundAudit',
+
+        '汇率管理': '/rate',
+
+        '消耗管理': '/coinConsume',
+        '消耗页面': '/coinConsume',
+
+        '权限管理': '/permissions',
+
+        '充值管理': '/coinRecharge',
+        '充值页面': '/coinRecharge',
+
+        '退款管理': '/coinRefund',
+        '退款页面': '/coinRefund',
+
+        '客户账户明细': '/usergold',
+    };
+
+    // 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
+    return routeMap[menu.menuName] || '/noPermissionPage'
+
+}

src/views/audit/audit.vue

@@ -1,66 +1,117 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'rechargeAudit' ? 'primary' : 'default'"
-          @click="goRechargeAudit"
+          @click="navigateTo('rechargeAudit')"
+          :disabled="!hasRechargePermission"
       >
         充值审核
       </el-button>
       <el-button
           :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
-          @click="goRefundAudit"
+          @click="navigateTo('refundAudit')"
+          :disabled="!hasRefundPermission"
       >
         退款审核
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from 'vue';
+import {ref, watch, onMounted, computed} from 'vue';
 import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
-//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
-//此时获取到的路由信息是clientCountDetail，所以默认是detail
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+const activeTab = ref('');
 
-const goRechargeAudit = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'rechargeAudit';
-  router.push({ name: 'rechargeAudit' });
-};
+// 充值审核权限判断
+const hasRechargePermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '充值审核' || menu.menuName === '财务审核'
+  );
+});
 
-const goRefundAudit = () => {
-  // 点击按钮时更新 activeTab 为balance
-  activeTab.value = 'refundAudit';
-  router.push({ name: 'refundAudit' });
-};
+// 退款审核权限判断
+const hasRefundPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '退款审核' || menu.menuName === '财务审核'
+  );
+});
 
-// 监听路由变化，更新 activeTab
-watch(() => route.name, (newName) => {
-  if (newName === 'rechargeAudit') {
-    activeTab.value = 'rechargeAudit';
-  } else if (newName === 'refundAudit') {
-    activeTab.value = 'refundAudit';
-  }});
+// 导航方法
+const navigateTo = (name) => {
+  // 检查对应权限，无权限则不执行跳转
+  if ((name === 'rechargeAudit' && !hasRechargePermission.value) ||
+      (name === 'refundAudit' && !hasRefundPermission.value)) {
+    return;
+  }
+  activeTab.value = name;
+  router.push({name});
+};
 
-// 当进入父路由时，默认跳转到金币明细页面
-// if (route.name === 'usergold') {
-//   router.push({ name: 'clientCountDetail' });
-// }
+// 检查权限并返回默认路由
+const getDefaultAuditRoute = () => {
+  // 优先检查充值审核权限
+  if (hasRechargePermission.value) return 'rechargeAudit';
+  // 其次检查退款审核权限
+  if (hasRefundPermission.value) return 'refundAudit';
+  // 无任何权限时返回null
+  return null;
+};
 
+// 监听路由变化
+watch(() => route.path, (newPath) => {
+  // 当路径变更为 /audit 时执行跳转逻辑
+  if (newPath === '/audit') {
+    const defaultRoute = getDefaultAuditRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      console.warn('用户没有充值审核和退款审核的权限');
+      // router.push({ name: 'noPermission' });
+    }
+  }
+});
 
-onMounted(async function () {
-  console.log("@@@@@@@@@@@@",route.name)
+// 监听路由变化更新标签状态
+watch(() => route.name, (newName) => {
+  // 只有在有权限的情况下才更新标签状态
+  if (newName === 'rechargeAudit' && hasRechargePermission.value) {
+    activeTab.value = newName;
+  } else if (newName === 'refundAudit' && hasRefundPermission.value) {
+    activeTab.value = newName;
+  }
 });
 
+// 初始化逻辑 - 保留原有逻辑处理首次加载
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/audit') {
+    const defaultRoute = getDefaultAuditRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      // console.warn('用户没有充值审核和退款审核的权限');
+      router.push({ name: 'noPermission' });
+    }
+  } else {
+    // 非父路由初始化当前标签状态（带权限校验）
+    if (route.name === 'rechargeAudit' && hasRechargePermission.value) {
+      activeTab.value = route.name;
+    } else if (route.name === 'refundAudit' && hasRefundPermission.value) {
+      activeTab.value = route.name;
+    }
+  }
+});
 </script>

src/views/consume/coinConsume.vue

@@ -1,61 +1,121 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
       新增消耗
       </el-button>
       <el-button
           :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
       金币消耗明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import {ref, watch, onMounted, computed} from 'vue';  // 新增computed导入
 import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+const activeTab = ref('');
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinConsume' });
+// 路由名称映射
+const routeMap = {
+  add: 'addCoinConsume',
+  detail: 'coinConsumeDetail'
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinConsumeDetail' });
+// 新增消耗权限判断（与其他页面保持一致的computed写法）
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增消耗' || menu.menuName === '消耗管理'
+  );
+});
+
+// 金币消耗明细权限判断（补充明细权限逻辑）
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币消耗明细' || menu.menuName === '消耗管理'
+  );
+});
+
+// 导航方法（补充权限校验）
+const navigateTo = (tab) => {
+  // 检查对应权限，无权限则不执行跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
 };
 
-// 监听路由变化，更新 activeTab
+// 检查权限并返回默认路由（优化权限判断逻辑）
+const getDefaultConsumeRoute = () => {
+  // 优先检查新增消耗权限
+  if (hasAddPermission.value) return 'add';
+  // 其次检查明细权限
+  if (hasDetailPermission.value) return 'detail';
+  // 无任何权限时返回null
+  return null;
+};
+
+// 监听路由变化更新标签状态（增加权限校验）
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinConsume') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinConsumeDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinConsume') {
-//   router.push({ name: 'addCoinConsume' });
-// }
+// 监听路径变化，处理直接访问父路由的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinConsume') {  // 假设父路由路径为/coinConsume
+    const defaultRoute = getDefaultConsumeRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      console.warn('用户没有新增消耗和金币消耗明细的权限');
+      // router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  }
+});
+
+// 初始化逻辑（完善权限校验和状态同步）
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/coinConsume') {  // 假设父路由路径为/coinConsume
+    const defaultRoute = getDefaultConsumeRoute();
+    if (defaultRoute) {
+      navigateTo(defaultRoute);
+    } else {
+      // console.warn('用户没有新增消耗和金币消耗明细的权限');
+      router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  } else {
+    // 子路由直接进入时同步状态（带权限校验）
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>

src/views/home.vue

@@ -1,118 +1,37 @@
 <script setup>
 // 导航栏在这
-import {onMounted, ref} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
-import API from '@/util/http'
 import dmmn from '../assets/link.png'
-import moment from 'moment'
 import ChangePassword from '@/components/changePassword.vue'
-
-// 获取当前路由实例
-const route = useRoute()
+import {useAdminStore} from '@/store'
+import {storeToRefs} from 'pinia'
+import {filterMenu, getRoutePath} from "@/utils/menuUtils.js";
 
 // 存储接口返回的菜单数据
 const menuList = ref([])
 
+// 获取仓库实例
+const adminStore = useAdminStore()
+// 解构状态（保持响应式） 获得 adminData（用户信息） 和 menuTree（菜单树）
+const {adminData, menuTree} = storeToRefs(adminStore)
 
+// 筛选权限菜单 ,menuTree 是组件通信拿的
+menuList.value = filterMenu(menuTree.value)
 
-/**
- * 调用 /menu/tree 接口获取菜单数据
- */
-const fetchMenuTree = async function() {
-  try {
-    const result = await API({ url: '/menu/tree', data: {id: adminData.value.roleId} })
-
-    return result.data  // 直接返回接口响应数据
-  } catch (error) {
-    console.error('菜单数据请求失败：', error)
-    return { code: 500, msg: '获取菜单失败' }
-  }
-}
-
-function filterMenu(menuList) {
-  return menuList
-      .filter(menu => menu.menuType !== 4)
-      .map(menu => ({
-        ...menu,
-        children: menu.children ? filterMenu(menu.children) : []
-      }))
-      .sort((a, b) => a.priority - b.priority); // 按 id 升序
-}
-
-/**
- * 映射菜单名称到路由路径
- */
-const getRoutePath = (menu) => {
-  // 路由映射表：key为接口menuName，value为对应路由路径
-  const routeMap = {
-    '工作台': '/workspace',
-
-    '审核页面': '/audit',
-    '财务审核': '/audit',
-
-    '充值审核': '/rechargeAudit',
-    '退款审核': '/refundAudit',
-
-    '汇率管理': '/rate',
-
-    '消耗管理': '/coinConsume',
-    '消耗页面': '/coinConsume',
-
-    '权限管理': '/permissions',
-
-    '充值管理': '/coinRecharge',
-    '充值页面': '/coinRecharge',
-
-    '退款管理': '/coinRefund',
-    '退款页面': '/coinRefund',
-
-    '客户账户明细': '/usergold',
-  };
-
-  // 未匹配的菜单默认使用id作为路由（可根据实际需求调整）
-  return routeMap[menu.menuName] || '/workspace'
-}
+console.log("menuList", menuList.value)
 
 const router = useRouter()
 const imgrule1 = dmmn
 const messageVisible = ref(false)
 
-// 这是获取用户信息的接口
-const adminData = ref({
-  name: ''
-})
-
-const getAdminData = async function () {
-  try {
-    const result = await API({ url: '/admin/userinfo', data: {} })
-    adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-// 获取地区
-const areas = ref([])
-
-const currentArea = ref('全部')
-
-const getAreas = async function () {
-  try {
-    const result = await API({ url: '/general/adminMarkets', data: {
-      account: adminData.value.account,
-      } })
-    areas.value = result.data
-    console.log('请求成功', result)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
+
 // 查看个人信息弹出框
 const openMessage = function () {
   messageVisible.value = true
 }
+// 关闭个人信息
 const closeMessage = function () {
   messageVisible.value = false
 }
@@ -120,93 +39,23 @@ const message = function () {
   openMessage()
 }
 
-// 导出列表数据
-const exportList = ref([])
-// 导出列表加载状态
-const exportListLoading = ref(false)
-
-//根据状态返回对应的标签类型
-const getTagType = (state) => {
-  switch (state) {
-    case 0:
-      return 'info';
-    case 1:
-      return 'primary';
-    case 2:
-      return'success';
-    case 3:
-      return 'danger';
-    default:
-      return 'info';
-  }
-}
-//根据状态返回对应的标签文案
-const getTagText = (state) => {
-  switch (state) {
-    case 0:
-      return '待执行';
-    case 1:
-      return '执行中';
-    case 2:
-      return'执行完成';
-    case 3:
-      return '执行出错';
-    default:
-      return '未知状态';
-  }
-}
+// 显示修改密码弹窗
+const showPasswordDialog = ref(false)
 
-// 下载导出文件
-const downloadExportFile = (item) => {
-  if (item.state === 2) {
-    const link = document.createElement('a')
-    link.href = item.url
-    link.download = item.fileName
-    link.click()
-  } else {
-    ElMessage.warning('文件还在导出中，请稍后再试')
-  }
+//打开修改密码弹窗
+const openChangePassword = () => {
+  showPasswordDialog.value = true
 }
 
+
 function logout() {
   const machineId = localStorage.getItem('machineId')
   localStorage.removeItem('token')
+  adminStore.clearState()
   router.push('/login?machineId=' + machineId)
   ElMessage.success('退出成功')
 }
 
-// 挂载
-onMounted(async function () {
-  // 获取用户信息
-
-  await getAdminData()
-
-  const menus = await fetchMenuTree()
-  menuList.value = filterMenu(menus)
-})
-// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
-const changeDataByArea = (item) => {
-  currentArea.value = item
-}
-
-// 控制导出列表弹窗显示状态
-const exportListVisible = ref(false)
-// 显示修改密码弹窗
-const showPasswordDialog = ref(false)
-// 打开导出列表弹窗
-const openExportList = () => {
-  getExportList()
-  exportListVisible.value = true
-}
-//打开修改密码弹窗
-const openChangePassword = () => {
-  showPasswordDialog.value = true
-}
-// 關閉修改密碼的清空邏輯
-const changePasswordRef = ref(null)
-const handleClosePasswordDialog = () => {
-  changePasswordRef.value?.resetFields()
-}
 
 </script>
 
@@ -229,11 +78,18 @@ const handleClosePasswordDialog = () => {
         </div>
         <el-card style="min-height: 90%;">
 
-          <el-menu :router="true" class="el-menu-vertical-demo" :default-active="$route.path">
+          <el-menu
+              :router="true"
+              class="el-menu-vertical-demo"
+              :default-active="$route.path"
+          >
             <!-- 递归渲染菜单层级 -->
             <template v-for="menu in menuList" :key="menu.id">
               <!-- 有子菜单的父级菜单（menuType=2 且存在children） -->
-              <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.id.toString()">
+              <el-sub-menu
+                  v-if="menu.children && menu.children.length > 0"
+                  :index="menu.id.toString()"
+              >
                 <template #title>
                   <el-icon>
                     <Folder/>
@@ -243,12 +99,18 @@ const handleClosePasswordDialog = () => {
                 <!-- 子菜单 -->
                 <template v-for="child in menu.children" :key="child.id">
                   <!-- 子菜单为叶子节点（无children） -->
-                  <el-menu-item v-if="!child.children || child.children.length === 0" :index="getRoutePath(child)">
+                  <el-menu-item
+                      v-if="!child.children || child.children.length === 0"
+                      :index="getRoutePath(child)"
+                  >
                     <span>{{ child.menuName }}</span>
                   </el-menu-item>
 
                   <!-- 子菜单有下级 -->
-                  <el-sub-menu v-else :index="child.id.toString()">
+                  <el-sub-menu
+                      v-else
+                      :index="child.id.toString()"
+                  >
                     <template #title>
                       <span>{{ child.menuName }}</span>
                     </template>
@@ -263,7 +125,10 @@ const handleClosePasswordDialog = () => {
               </el-sub-menu>
 
               <!-- 无子菜单的一级菜单 -->
-              <el-menu-item v-else :index="getRoutePath(menu)">
+              <el-menu-item
+                  v-else
+                  :index="getRoutePath(menu)"
+              >
                 <el-icon>
                   <Folder/>
                 </el-icon>
@@ -331,11 +196,16 @@ const handleClosePasswordDialog = () => {
       </template>
     </el-dialog>
 
-    <!-- 自定义密码修改弹窗组件 父組件和子組件通信-->
-    <el-dialog v-model="showPasswordDialog" :center="true" width="470px" @close="handleClosePasswordDialog">
-      <ChangePassword ref="changePasswordRef" @confirm="showPasswordDialog = false" />
+    <!-- 自定义密码修改弹窗组件 -->
+    <el-dialog
+        v-model="showPasswordDialog"
+        :center="true"
+        width="470px"
+    >
+      <ChangePassword @confirm="showPasswordDialog = false"/>
     </el-dialog>
 
+
   </div>
 </template>
 

src/views/login.vue

@@ -1,11 +1,12 @@
 <script setup>
-import {ref, onMounted, reactive, computed} from 'vue'
+import {onMounted, ref} from 'vue'
 import {ElMessage} from 'element-plus'
-import axios from 'axios'
 import request from '@/util/http'
 import {useRouter} from 'vue-router'
-import {VscGlobe} from 'vue-icons-plus/vsc'
 import API from "@/util/http.js";
+import {useAdminStore} from '@/store'
+// 方法抽出来 三个地方会用到
+import {filterMenu, findFirstAccessibleMenu, getRoutePath} from "../utils/menuUtils.js"
 
 const router = useRouter() // 获取路由实例
 //获取当前浏览器地址
@@ -27,40 +28,47 @@ function getMachineId() {
   }
 }
 
-const adminRoleId = ref(null)
 const form = ref({account: null, password: '', token: '', machineId: machineId1.value})
+
+const  adminRoleId = ref(null)
 //调用方法
 const login = async function () {
+
   try {
     const result = await request({
       url: '/admin/login',
       data: form.value
     })
-    console.log('看看传给后端的参数', form.value)
-    if (result.code == 200) {
+    console.log('传给后端的参数', form.value)
+
+    if (result.code === 200) {
+      // 本地存储token
       localStorage.setItem('token', result.msg)
-      // localStorage.setItem('permission', result.data.permission)
 
-      adminRoleId.value = result.data.roleId
-      await getMenuTree()
+      // pinia 存储用户相关信息
+      const adminStore = useAdminStore()
 
+      // 存储用户信息
+      adminStore.setAdminData(result.data)
+
+      // 本页面使用 adminRoleId
+      adminRoleId.value = result.data.roleId
 
-      // 获取用户菜单权限
+      // 存储菜单树
       const menuTree = await getMenuTree()
-      const filteredMenu = filterMenu(menuTree)
 
-      // 获取第一个有效菜单项
-      const firstMenu = findFirstAccessibleMenu(filteredMenu)
-      console.log('第一个有效菜单项:', firstMenu)
+      console.log('存储菜单树menuTree', menuTree)
+      adminStore.setMenuTree(menuTree)
 
-      // 根据权限跳转
+      // 过滤
+      const filteredMenu = filterMenu(adminStore.menuTree)
+      // 获取第一个可访问的菜单
+      const firstMenu = findFirstAccessibleMenu(filteredMenu)
+      // 获取第一个可访问的菜单的 path
       const redirectPath = firstMenu ? getRoutePath(firstMenu) : '/noPermissionPage'
-console.log('获取到的菜单树:', filteredMenu)
-      console.log('跳转路径:', redirectPath)
+      // 跳转
       router.push(redirectPath)
 
-      // router.push('/workspace')
-
       ElMessage.success('登录成功')
       console.log('请求成功', result)
     } else {
@@ -71,11 +79,8 @@ console.log('获取到的菜单树:', filteredMenu)
   } catch (error) {
     console.log('请求失败', error)
     ElMessage.error('登录失败，请检查账号密码')
-
   }
 }
-
-
 //获取菜单树
 const getMenuTree = async function () {
   // 获取菜单树
@@ -89,10 +94,6 @@ const getMenuTree = async function () {
   }
 }
 
-// 方法抽出来 三个地方会用到
-import {filterMenu,findFirstAccessibleMenu,getRoutePath} from "../utils/menu-utils.js"
-
-
 
 onMounted(() => {
   getMachineId()

src/views/recharge/coinRecharge.vue

@@ -1,61 +1,119 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
         新增充值
       </el-button>
       <el-button
           :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
         金币充值明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import {ref, watch, onMounted, computed} from 'vue';
 import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinRechargeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinRecharge，所以默认是add
-//此时获取到的路由信息是coinRecharge，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+// 路由名称映射表
+const routeMap = {
+  add: 'addCoinRecharge',
+  detail: 'coinRechargeDetail'
+};
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinRecharge' });
+// 激活的标签
+const activeTab = ref('');
+
+// 检查新增权限
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增充值' || menu.menuName === '充值管理'
+  );
+});
+
+// 检查明细权限
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币充值明细' || menu.menuName === '充值管理'
+  );
+});
+
+// 统一导航方法
+const navigateTo = (tab) => {
+  // 检查权限后再跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinRechargeDetail' });
+// 获取默认路由
+const getDefaultRoute = () => {
+  if (hasAddPermission.value) return 'add';
+  if (hasDetailPermission.value) return 'detail';
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinRecharge') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinRechargeDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinRecharge') {
-//   router.push({ name: 'addCoinRecharge' });
-// }
+// 监听路径变化，处理直接访问父路由路径的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinRecharge') {  // 假设父路由路径为/coinRecharge
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      console.warn('用户没有新增充值和金币充值明细的权限');
+      // router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  }
+});
+
+// 初始化
+onMounted(() => {
+  // 父路由默认跳转（同时处理路径和名称两种判断方式）
+  if (route.name === 'coinRecharge' || route.path === '/coinRecharge') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      // console.warn('用户没有新增充值和金币充值明细的权限');
+      router.push({ name: 'noPermission' });  // 可根据实际需求启用
+    }
+  } else {
+    // 子路由直接进入时同步状态（增加权限校验）
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>

src/views/refund/coinRefund.vue

@@ -1,61 +1,119 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'add' ? 'primary' : 'default'"
-        @click="goToAdd"
+          @click="navigateTo('add')"
+          :disabled="!hasAddPermission"
       >
         新增退款
       </el-button>
       <el-button
           :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
         金币退款明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import {ref, watch, onMounted, computed} from 'vue';
 import {useRouter, useRoute} from 'vue-router';
+import {storeToRefs} from 'pinia';
+import {useAdminStore} from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinRefundDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinRefundDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinRefund，所以默认是add
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const {menuTree} = storeToRefs(adminStore);
 
+// 路由名称映射表
+const routeMap = {
+  add: 'addCoinRefund',
+  detail: 'coinRefundDetail'
+};
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinRefund' });
+// 激活的标签
+const activeTab = ref('');
+
+// 检查新增权限
+const hasAddPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '新增退款' || menu.menuName === '退款管理'
+  );
+});
+
+// 检查明细权限
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币退款明细' || menu.menuName === '退款管理'
+  );
+});
+
+// 统一导航方法
+const navigateTo = (tab) => {
+  // 检查权限后再跳转
+  if ((tab === 'add' && !hasAddPermission.value) ||
+      (tab === 'detail' && !hasDetailPermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({name: routeMap[tab]});
 };
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinRefundDetail' });
+// 获取默认路由
+const getDefaultRoute = () => {
+  if (hasAddPermission.value) return 'add';
+  if (hasDetailPermission.value) return 'detail';
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签
 watch(() => route.name, (newName) => {
-  if (newName === 'addCoinRefund') {
+  if (newName === routeMap.add && hasAddPermission.value) {
     activeTab.value = 'add';
-  } else if (newName === 'coinRefundDetail') {
+  } else if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
   }
 });
 
-// 当进入父路由时，默认跳转到新增消耗页面
-// if (route.name === 'coinRefund') {
-//   router.push({ name: 'addCoinRefund' });
-// }
+// 监听路径变化，处理父路由直接访问的情况
+watch(() => route.path, (newPath) => {
+  if (newPath === '/coinRefund') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      console.warn('用户没有新增退款和金币退款明细的权限');
+      // router.push({ name: 'noPermission' });
+    }
+  }
+});
+
+// 初始化
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.path === '/coinRefund') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    } else {
+      // console.warn('用户没有新增退款和金币退款明细的权限');
+      router.push({ name: 'noPermission' });
+    }
+  } else {
+    // 子路由直接进入时同步状态
+    if (route.name === routeMap.add && hasAddPermission.value) {
+      activeTab.value = 'add';
+    } else if (route.name === routeMap.detail && hasDetailPermission.value) {
+      activeTab.value = 'detail';
+    }
+  }
+});
 </script>

src/views/usergold/clientCount.vue

@@ -1,61 +1,104 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
           :type="activeTab === 'detail' ? 'primary' : 'default'"
-        @click="goToDetail"
+          @click="navigateTo('detail')"
+          :disabled="!hasDetailPermission"
       >
         金币明细
       </el-button>
       <el-button
           :type="activeTab === 'balance' ? 'primary' : 'default'"
-        @click="goToBalance"
+          @click="navigateTo('balance')"
+          :disabled="!hasBalancePermission"
       >
         金币余额
       </el-button>
     </el-button-group>
 
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useAdminStore } from '@/store/index.js';
 
-const router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail');
-//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
-//此时获取到的路由信息是clientCountDetail，所以默认是detail
+const router = useRouter();
+const route = useRoute();
+const adminStore = useAdminStore();
+const { menuTree } = storeToRefs(adminStore);
 
+// 路由名称映射表
+const routeMap = {
+  detail: 'clientCountDetail',
+  balance: 'clientCountBalance'
+};
 
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'clientCountDetail' });
+// 激活的标签
+const activeTab = ref('');
+
+// 检查金币明细权限
+const hasDetailPermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币明细' || menu.menuName === '客户账户明细'
+  );
+});
+
+// 检查金币余额权限
+const hasBalancePermission = computed(() => {
+  if (!menuTree.value) return false;
+  return menuTree.value.some(menu =>
+      menu.menuName === '金币余额' || menu.menuName === '客户账户明细'
+  );
+});
+
+// 统一导航方法
+const navigateTo = (tab) => {
+  // 检查权限后再跳转
+  if ((tab === 'detail' && !hasDetailPermission.value) ||
+      (tab === 'balance' && !hasBalancePermission.value)) {
+    return;
+  }
+  activeTab.value = tab;
+  router.push({ name: routeMap[tab] });
 };
 
-const goToBalance = () => {
-  // 点击按钮时更新 activeTab 为balance
-  activeTab.value = 'balance';
-  router.push({ name: 'clientCountBalance' });
+// 获取默认路由
+const getDefaultRoute = () => {
+  if (hasDetailPermission.value) return 'detail';
+  if (hasBalancePermission.value) return 'balance';
+  return null;
 };
 
-// 监听路由变化，更新 activeTab
+// 监听路由变化更新标签
 watch(() => route.name, (newName) => {
-  if (newName === 'clientCountDetail') {
+  if (newName === routeMap.detail && hasDetailPermission.value) {
     activeTab.value = 'detail';
-  } else if (newName === 'clientCountBalance') {
+  } else if (newName === routeMap.balance && hasBalancePermission.value) {
     activeTab.value = 'balance';
-}});
+  }
+});
 
-// 当进入父路由时，默认跳转到金币明细页面
-// if (route.name === 'usergold') {
-//   router.push({ name: 'clientCountDetail' });
-// }
+// 初始化
+onMounted(() => {
+  // 父路由默认跳转
+  if (route.name === 'usergold') {
+    const defaultTab = getDefaultRoute();
+    if (defaultTab) {
+      navigateTo(defaultTab);
+    }
+  } else {
+    // 子路由直接进入时同步状态
+    if (route.name === routeMap.detail) {
+      activeTab.value = 'detail';
+    } else if (route.name === routeMap.balance) {
+      activeTab.value = 'balance';
+    }
+  }
+});
 </script>