From b734f7cb1378f9be662d7a7390eb9d92c5a630f8 Mon Sep 17 00:00:00 2001 From: Wisdom Date: Sun, 4 Feb 2024 14:56:57 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20fix:=20hmr=20hot=20reload=20circ?= =?UTF-8?q?ular=20import=20(#147)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 32 ++++++----- src/router/index.js | 9 +++- src/router/permission.js | 84 +++++++++++++++-------------- src/store/hooks/useOutsideRouter.ts | 10 ++++ src/store/plugins/index.js | 2 - src/utils/request.js | 5 +- 6 files changed, 82 insertions(+), 60 deletions(-) create mode 100644 src/store/hooks/useOutsideRouter.ts diff --git a/src/main.js b/src/main.js index f280e9ab..6ce8934f 100644 --- a/src/main.js +++ b/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 diff --git a/src/router/index.js b/src/router/index.js index 2d6ebde9..765cef13 100644 --- a/src/router/index.js +++ b/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) +} + diff --git a/src/router/permission.js b/src/router/permission.js index 4ed57b3b..1ff91b29 100644 --- a/src/router/permission.js +++ b/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() -}) diff --git a/src/store/hooks/useOutsideRouter.ts b/src/store/hooks/useOutsideRouter.ts new file mode 100644 index 00000000..6780d8cf --- /dev/null +++ b/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 + } +}) diff --git a/src/store/plugins/index.js b/src/store/plugins/index.js index 14572a5b..73e037b3 100644 --- a/src/store/plugins/index.js +++ b/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 } diff --git a/src/utils/request.js b/src/utils/request.js index 107f95e9..14bc3b4c 100755 --- a/src/utils/request.js +++ b/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 = {