fix: 解决vite5循环引用导致热更新失效问题

src/store/modules/auth.js

@@ -7,8 +7,7 @@
  **********************************/
 
 import { defineStore } from 'pinia'
-import { useUserStore, usePermissionStore, useTabStore } from '@/store'
-import { resetRouter, router } from '@/router'
+import { useUserStore, usePermissionStore, useTabStore, useRouterStore } from '@/store'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -22,24 +21,30 @@ export const useAuthStore = defineStore('auth', {
       this.$reset()
     },
     toLogin() {
-      const currentRoute = unref(router.currentRoute)
+      const { router, route } = useRouterStore()
       router.replace({
         path: '/login',
-        query: currentRoute.query,
+        query: route.query,
       })
     },
+    async switchCurrentRole(data) {
+      this.resetLoginState()
+      await nextTick()
+      this.setToken(data)
+    },
     resetLoginState() {
       const { resetUser } = useUserStore()
-      const { resetPermission } = usePermissionStore()
+      const { resetRouter } = useRouterStore()
+      const { resetPermission, accessRoutes } = usePermissionStore()
       const { resetTabs } = useTabStore()
+      // 重置路由
+      resetRouter(accessRoutes)
       // 重置用户
       resetUser()
       // 重置权限
       resetPermission()
       // 重置Tabs
       resetTabs()
-      // 重置路由
-      resetRouter()
       // 重置token
       this.resetToken()
     },

src/store/modules/index.js

@@ -3,3 +3,4 @@ export * from './auth'
 export * from './permission'
 export * from './tab'
 export * from './user'
+export * from './router'

src/store/modules/permission.js

@@ -7,27 +7,16 @@
  **********************************/
 
 import { defineStore } from 'pinia'
-import { isExternal } from '@/utils'
-import { basePermissions } from '@/settings'
-import api from '@/api'
-
-const routeComponents = import.meta.glob('@/views/**/*.vue')
 
 export const usePermissionStore = defineStore('permission', {
   state: () => ({
-    menus: [],
     accessRoutes: [],
-    asyncPermissions: [],
+    permissions: [],
+    menus: [],
   }),
-  getters: {
-    permissions() {
-      return basePermissions.concat(this.asyncPermissions)
-    },
-  },
   actions: {
-    async initPermissions() {
-      const { data } = (await api.getRolePermissions()) || []
-      this.asyncPermissions = data
+    setPermissions(permissions) {
+      this.permissions = permissions
       this.menus = this.permissions
         .filter((item) => item.type === 'MENU')
         .map((item) => this.getMenuItem(item))
@@ -36,7 +25,7 @@ export const usePermissionStore = defineStore('permission', {
     },
     getMenuItem(item, parent) {
       const route = this.generateRoute(item, item.show ? null : parent?.key)
-      if (item.enable && route.path && !isExternal(route.path)) this.accessRoutes.push(route)
+      if (item.enable && route.path && !route.path.startsWith('http')) this.accessRoutes.push(route)
       if (!item.show) return null
       const menuItem = {
         label: route.meta.title,
@@ -60,7 +49,7 @@ export const usePermissionStore = defineStore('permission', {
         name: item.code,
         path: item.path,
         redirect: item.redirect,
-        component: routeComponents[item.component] || undefined,
+        component: item.component,
         meta: {
           icon: item.icon,
           title: item.name,

src/store/modules/router.js

@@ -0,0 +1,26 @@
+/**********************************
+ * @Author: Ronnie Zhang
+ * @LastEditor: Ronnie Zhang
+ * @LastEditTime: 2024/01/06 17:18:40
+ * @Email: zclzone@outlook.com
+ * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ **********************************/
+
+import { defineStore } from 'pinia'
+
+export const useRouterStore = defineStore('router', () => {
+  const router = useRouter()
+  const route = useRoute()
+
+  function resetRouter(accessRoutes) {
+    accessRoutes.forEach((item) => {
+      router.hasRoute(item.name) && router.removeRoute(item.name)
+    })
+  }
+
+  return {
+    router,
+    route,
+    resetRouter,
+  }
+})

src/store/modules/tab.js

@@ -7,7 +7,7 @@
  **********************************/
 
 import { defineStore } from 'pinia'
-import { router } from '@/router'
+import { useRouterStore } from './router'
 
 export const useTabStore = defineStore('tab', {
   state: () => ({
@@ -55,13 +55,13 @@ export const useTabStore = defineStore('tab', {
     async removeTab(path) {
       this.setTabs(this.tabs.filter((tab) => tab.path !== path))
       if (path === this.activeTab) {
-        router.push(this.tabs[this.tabs.length - 1].path)
+        useRouterStore().router?.push(this.tabs[this.tabs.length - 1].path)
       }
     },
     removeOther(curPath = this.activeTab) {
       this.setTabs(this.tabs.filter((tab) => tab.path === curPath))
       if (curPath !== this.activeTab) {
-        router.push(this.tabs[this.tabs.length - 1].path)
+        useRouterStore().router?.push(this.tabs[this.tabs.length - 1].path)
       }
     },
     removeLeft(curPath) {
@@ -69,7 +69,7 @@ export const useTabStore = defineStore('tab', {
       const filterTabs = this.tabs.filter((item, index) => index >= curIndex)
       this.setTabs(filterTabs)
       if (!filterTabs.find((item) => item.path === this.activeTab)) {
-        router.push(filterTabs[filterTabs.length - 1].path)
+        useRouterStore().router?.push(filterTabs[filterTabs.length - 1].path)
       }
     },
     removeRight(curPath) {
@@ -77,7 +77,7 @@ export const useTabStore = defineStore('tab', {
       const filterTabs = this.tabs.filter((item, index) => index <= curIndex)
       this.setTabs(filterTabs)
       if (!filterTabs.find((item) => item.path === this.activeTab.value)) {
-        router.push(filterTabs[filterTabs.length - 1].path)
+        useRouterStore().router?.push(filterTabs[filterTabs.length - 1].path)
       }
     },
     resetTabs() {

src/store/modules/user.js

@@ -7,8 +7,6 @@
  **********************************/
 
 import { defineStore } from 'pinia'
-import api from '@/api'
-import { useAuthStore } from '@/store'
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -35,32 +33,8 @@ export const useUserStore = defineStore('user', {
     },
   },
   actions: {
-    async getUserInfo() {
-      try {
-        const res = await api.getUser()
-        const { id, username, profile, roles, currentRole } = res.data || {}
-        this.userInfo = {
-          id,
-          username,
-          avatar: profile?.avatar,
-          nickName: profile?.nickName,
-          gender: profile?.gender,
-          address: profile?.address,
-          email: profile?.email,
-          roles,
-          currentRole,
-        }
-        return Promise.resolve(res.data)
-      } catch (error) {
-        return Promise.reject(error)
-      }
-    },
-    async switchCurrentRole(roleCode) {
-      const { data } = await api.switchCurrentRole(roleCode)
-      const authStore = useAuthStore()
-      authStore.resetLoginState()
-      await nextTick()
-      authStore.setToken(data)
+    setUser(user) {
+      this.userInfo = user
     },
     resetUser() {
       this.$reset()