chore: 重构权限路由守卫

src/router/guards/permission-guard.js

@@ -6,8 +6,9 @@
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
 
-import { useAuthStore } from '@/store'
+import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
 import api from '@/api'
+import { getPermissions, getUserInfo } from '@/store/helper'
 
 const WHITE_LIST = ['/login', '/404']
 export function createPermissionGuard(router) {
@@ -25,6 +26,20 @@ export function createPermissionGuard(router) {
     if (to.path === '/login') return { path: '/' }
     if (WHITE_LIST.includes(to.path)) return true
 
+    const userStore = useUserStore()
+    const permissionStore = usePermissionStore()
+    if (!userStore.userInfo) {
+      const [user, permissions] = await Promise.all([getUserInfo(), getPermissions()])
+      userStore.setUser(user)
+      permissionStore.setPermissions(permissions)
+      const routeComponents = import.meta.glob('@/views/**/*.vue')
+      permissionStore.accessRoutes.forEach((route) => {
+        route.component = routeComponents[route.component] || undefined
+        !router.hasRoute(route.name) && router.addRoute(route)
+      })
+      return { ...to, replace: true }
+    }
+
     const routes = router.getRoutes()
     if (routes.find((route) => route.name === to.name)) return true
 

src/router/index.js

@@ -8,8 +8,6 @@
 
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import { setupRouterGuards } from './guards'
-import { useAuthStore, usePermissionStore, useUserStore } from '@/store'
-import { getPermissions, getUserInfo } from '@/store/helper'
 import { basicRoutes } from './basic-routes'
 
 export const router = createRouter({
@@ -22,36 +20,6 @@ export const router = createRouter({
 })
 
 export async function setupRouter(app) {
-  try {
-    await initUserAndPermissions()
-  } catch (error) {
-    console.error('🚀 初始化失败', error)
-  }
-  setupRouterGuards(router)
   app.use(router)
-}
-
-export async function initUserAndPermissions() {
-  const permissionStore = usePermissionStore()
-  const userStore = useUserStore()
-  const authStore = useAuthStore()
-
-  if (!authStore.accessToken) {
-    const route = unref(router.currentRoute)
-    if (route.path !== '/login') {
-      router.replace({
-        path: '/login',
-        query: route.query,
-      })
-    }
-    return
-  }
-  const [user, permissions] = await Promise.all([getUserInfo(), getPermissions()])
-  userStore.setUser(user)
-  permissionStore.setPermissions(permissions)
-  const routeComponents = import.meta.glob('@/views/**/*.vue')
-  permissionStore.accessRoutes.forEach((route) => {
-    route.component = routeComponents[route.component] || undefined
-    !router.hasRoute(route.name) && router.addRoute(route)
-  })
+  setupRouterGuards(router)
 }