🔥 fix: hmr hot reload circular import (#147)

src/main.js

@@ -1,7 +1,6 @@
 import { createApp } from 'vue'
 
-import router from '@/router'
-import '@/router/permission'
+import { setupRouter } from '@/router'
 import { setupStore } from '@/store'
 
 import App from '@/App.vue'
@@ -14,17 +13,22 @@ import Widgets from '@/widgets'
 
 const app = createApp(App)
 
-app
-  .use(router)
-
-setupStore(app)
-
-app
-  .use(ElementPlus)
-  .use(GlobalComponents)
-  .use(Widgets)
-  .use(Fonts)
-  .mixin(Mixin)
-  .mount('#app')
+function setupPlugins () {
+  app
+    .use(ElementPlus)
+    .use(GlobalComponents)
+    .use(Widgets)
+    .use(Fonts)
+    .mixin(Mixin)
+}
+
+async function setupApp () {
+  setupRouter(app)
+  setupStore(app)
+  app.mount('#app')
+}
+
+setupPlugins()
+setupApp()
 
 export default app

src/router/index.js

@@ -4,12 +4,19 @@ import {
   createWebHashHistory
 } from 'vue-router'
 import routes from './routes'
+import { createRouterGuards } from './permission'
 
 const history = process.env.VITE_ROUTER_MODE === 'hash'
   ? createWebHashHistory()
   : createWebHistory()
 
-export default createRouter({
+const router = createRouter({
   history,
   routes
 })
+
+export function setupRouter (app) {
+  createRouterGuards(router)
+  app.use(router)
+}
+

src/router/permission.js

@@ -1,4 +1,3 @@
-import router from '@/router'
 import { useUserAccountStore } from '@/modules/UserAccount/store'
 import Cookie from 'js-cookie'
 import { allowlist } from '@/router/auth-list'
@@ -11,57 +10,60 @@ NProgress.configure({
   showSpinner: false
 })
 
-router.beforeEach(async (to, from, next) => {
-  const userAccountStore = useUserAccountStore()
-  NProgress.start()
+export function createRouterGuards (router) {
+  router.beforeEach(async (to, from, next) => {
+    const userAccountStore = useUserAccountStore()
+    NProgress.start()
 
-  document.title = `${to.meta.title || ''} - ${systemTitle}`
+    document.title = `${to.meta.title || ''} - ${systemTitle}`
 
-  console.log('😄😄😄 ', to)
+    console.log('😄😄😄 ', to)
 
-  const currentRouteLocale = to.params.locale
+    const currentRouteLocale = to.params.locale
 
-  if (
-    allowlist.find(
-      name => to.name === name
-    )
-  ) {
-    next()
-    return
-  }
+    if (
+      allowlist.find(
+        name => to.name === name
+      )
+    ) {
+      next()
+      return
+    }
 
-  // 获取用户信息
+    // 获取用户信息
 
-  const { data, error } = await userAccountStore.getUserInfo()
+    const { data, error } = await userAccountStore.getUserInfo()
 
-  if (error) {
-    userAccountStore.setLanguage({
-      locale: currentRouteLocale || data.language
-    })
+    if (error) {
+      userAccountStore.setLanguage({
+        locale: currentRouteLocale || data.language
+      })
+      Cookie.remove('token')
+      Cookie.remove('name')
+      next('/en/user/login')
+      return
+    }
+
+    if (data.user.username && Cookie.get('name') === data.user.username) {
+      // TODO: It must be used together with the backend
+      userAccountStore.setLanguage({
+        locale: currentRouteLocale || data.language
+      })
+      next()
+      return
+    }
+
+    // ElMessage.error('登录失败，请重新登录')
     Cookie.remove('token')
     Cookie.remove('name')
-    next('/en/user/login')
-    return
-  }
-
-  if (data.user.username && Cookie.get('name') === data.user.username) {
-    // TODO: It must be used together with the backend
     userAccountStore.setLanguage({
-      locale: currentRouteLocale || data.language
+      locale: currentRouteLocale || userAccountStore.locale
     })
-    next()
-    return
-  }
+    next(`/${currentRouteLocale || userAccountStore.locale}/user/login`)
+  })
 
-  // ElMessage.error('登录失败，请重新登录')
-  Cookie.remove('token')
-  Cookie.remove('name')
-  userAccountStore.setLanguage({
-    locale: currentRouteLocale || userAccountStore.locale
+  router.afterEach((to) => {
+    NProgress.done()
   })
-  next(`/${currentRouteLocale || userAccountStore.locale}/user/login`)
-})
+}
 
-router.afterEach((to) => {
-  NProgress.done()
-})

src/store/hooks/useOutsideRouter.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { useRouter } from 'vue-router'
+
+export const useOutsideRouter = defineStore('outside-router', () => {
+  const router = useRouter()
+
+  return {
+    router
+  }
+})

src/store/plugins/index.js

@@ -3,9 +3,7 @@
  */
 
 import { filterResponse } from '@/store/utils/mixin'
-import router from '@/router'
 
 export const pluginPinia = ({ store }) => {
   store.filterResponse = filterResponse
-  store.router = router
 }

src/utils/request.js

@@ -2,11 +2,12 @@ import axios from 'axios'
 import Cookie from 'js-cookie'
 
 import { camelizeKeys, decamelizeKeys } from './camelCase'
-import Router from '../router/index'
+import { useOutsideRouter } from '@/store/hooks/useOutsideRouter'
 
 // redirect error
 function errorRedirect (url) {
-  Router.push(`/${url}`)
+  const { router } = useOutsideRouter()
+  router.push(url)
 }
 // code Message
 export const codeMessage = {