diff --git a/src/main.js b/src/main.js index 7fa1779..c0a57b2 100644 --- a/src/main.js +++ b/src/main.js @@ -8,12 +8,12 @@ import { setupRouter } from '@/router' import { setupStore } from '@/store' import App from './App.vue' -function setupApp() { +async function setupApp() { const app = createApp(App) setupStore(app) - setupRouter(app) + await setupRouter(app) app.mount('#app') } diff --git a/src/router/guard/permission-guard.js b/src/router/guard/permission-guard.js index 2c80b7d..f1f3b5e 100644 --- a/src/router/guard/permission-guard.js +++ b/src/router/guard/permission-guard.js @@ -1,13 +1,8 @@ -import { useUserStore } from '@/store/modules/user' -import { usePermissionStore } from '@/store/modules/permission' -import { NOT_FOUND_ROUTE } from '@/router/routes' import { getToken, refreshAccessToken } from '@/utils/token' import { isNullOrWhitespace } from '@/utils/is' const WHITE_LIST = ['/login', '/404'] export function createPermissionGuard(router) { - const userStore = useUserStore() - const permissionStore = usePermissionStore() router.beforeEach(async (to) => { const token = getToken() @@ -18,25 +13,9 @@ export function createPermissionGuard(router) { } /** 有token的情况 */ - if (to.path === '/login') return { path: '/', replace: true } - if (to.path === '/404') return true + if (to.path === '/login') return { path: '/' } - // 已经拿到用户信息 - if (userStore.userId) { - refreshAccessToken() - return true - } - try { - await userStore.getUserInfo() - const accessRoutes = permissionStore.generateRoutes(userStore.role) - accessRoutes.forEach((route) => { - !router.hasRoute(route.name) && router.addRoute(route) - }) - router.addRoute(NOT_FOUND_ROUTE) - return { ...to, replace: true } - } catch (error) { - console.error(error) - return - } + refreshAccessToken() + return true }) } diff --git a/src/router/index.js b/src/router/index.js index ffc0b74..fa75874 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,28 +1,53 @@ import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' import { setupRouterGuard } from './guard' -import { basicRoutes } from './routes' +import { basicRoutes as routes, EMPTY_ROUTE, NOT_FOUND_ROUTE } from './routes' +import { getToken } from '@/utils/token' +import { isNullOrWhitespace } from '@/utils/is' +import { useUserStore } from '@/store/modules/user' +import { usePermissionStore } from '@/store/modules/permission' const isHash = import.meta.env.VITE_USE_HASH === 'true' export const router = createRouter({ history: isHash ? createWebHashHistory('/') : createWebHistory('/'), - routes: [], + routes, scrollBehavior: () => ({ left: 0, top: 0 }), }) -export function resetRouter() { +export async function resetRouter() { router.getRoutes().forEach((route) => { const { name } = route router.hasRoute(name) && router.removeRoute(name) }) - basicRoutes.forEach((route) => { - !router.hasRoute(route.name) && router.addRoute(route) - }) + await addDynamicRoutes() } -export function setupRouter(app) { - basicRoutes.forEach((route) => { - !router.hasRoute(route.name) && router.addRoute(route) - }) - app.use(router) - setupRouterGuard(router) +export async function addDynamicRoutes() { + const token = getToken() + + // 没有token情况 + if (isNullOrWhitespace(token)) { + router.addRoute(EMPTY_ROUTE) + return + } + + // 有token的情况 + try { + const userStore = useUserStore() + const permissionStore = usePermissionStore() + !userStore.userId && (await userStore.getUserInfo()) + const accessRoutes = permissionStore.generateRoutes(userStore.role) + accessRoutes.forEach((route) => { + !router.hasRoute(route.name) && router.addRoute(route) + }) + router.hasRoute(EMPTY_ROUTE.name) && router.removeRoute(EMPTY_ROUTE.name) + router.addRoute(NOT_FOUND_ROUTE) + } catch (error) { + console.error(error) + } +} + +export async function setupRouter(app) { + await addDynamicRoutes() + setupRouterGuard(router) + app.use(router) } diff --git a/src/router/routes/index.js b/src/router/routes/index.js index e68a08d..e293376 100644 --- a/src/router/routes/index.js +++ b/src/router/routes/index.js @@ -63,6 +63,12 @@ export const NOT_FOUND_ROUTE = { isHidden: true, } +export const EMPTY_ROUTE = { + name: 'Empty', + path: '/:pathMatch(.*)*', + component: null, +} + const modules = import.meta.glob('@/views/**/route.js', { eager: true }) const asyncRoutes = [] Object.keys(modules).forEach((key) => { diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 86d9af3..f12108d 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -51,6 +51,7 @@ import { setToken } from '@/utils/token' import { useStorage } from '@vueuse/core' import bgImg from '@/assets/images/login_bg.webp' import api from './api' +import { addDynamicRoutes } from '@/router' const title = import.meta.env.VITE_TITLE @@ -91,6 +92,7 @@ async function handleLogin() { } else { lStorage.remove('loginInfo') } + await addDynamicRoutes() if (query.redirect) { const path = query.redirect Reflect.deleteProperty(query, 'redirect')