chore: 重构权限路由守卫

package.json

@@ -39,6 +39,7 @@
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4",
+    "vite-plugin-router-warn": "^1.0.0",
     "vite-plugin-simple-html": "^0.1.2"
   },
   "eslintConfig": {

src/layouts/components/UserAvatar.vue

@@ -23,7 +23,6 @@
 <script setup>
 import { useUserStore, useAuthStore, usePermissionStore } from '@/store'
 import { RoleSelect } from '@/layouts/components'
-import { initUserAndPermissions } from '@/router'
 import api from '@/api'
 
 const router = useRouter()
@@ -60,9 +59,7 @@ function handleSelect(key) {
     case 'toggleRole':
       roleSelectRef.value?.open({
         onOk() {
-          initUserAndPermissions().then(() => {
-            router.replace('/')
-          })
+          location.reload()
         },
       })
       break

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)
 }

src/views/login/index.vue

@@ -105,7 +105,6 @@ import { throttle, lStorage } from '@/utils'
 import { useStorage } from '@vueuse/core'
 import api from './api'
 import { useAuthStore } from '@/store'
-import { initUserAndPermissions } from '@/router'
 
 const authStore = useAuthStore()
 const router = useRouter()
@@ -167,7 +166,6 @@ async function onLoginSuccess(data = {}) {
   authStore.setToken(data)
   $message.loading('登录中...', { key: 'login' })
   try {
-    await initUserAndPermissions()
     $message.success('登录成功', { key: 'login' })
     if (route.query.redirect) {
       const path = route.query.redirect

vite.config.js

@@ -14,6 +14,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import simpleHtmlPlugin from 'vite-plugin-simple-html'
+import removeNoMatch from 'vite-plugin-router-warn'
 import { pluginPagePathes, pluginIcons } from './build/plugin-isme'
 
 export default defineConfig(({ command, mode }) => {
@@ -46,6 +47,8 @@ export default defineConfig(({ command, mode }) => {
       pluginPagePathes(),
       // 自定义插件，用于生成自定义icon，并添加到虚拟模块
       pluginIcons(),
+      // 移除非必要的vue-router动态路由警告: No match found for location with path
+      removeNoMatch(),
     ],
     resolve: {
       alias: {