路由加载重做

README.md

@@ -3,4 +3,4 @@
 ## 1.菜单设置
 ### 1.1 功能列表
 > 前端:主要是控制角色是否可以显示按钮
-> 服务:主要是用同一编码对接口的使用进行控制
+> 服务:主要是用同一编码对接口的使用进行控制

src/lang/package/zh-cn/common.js

@@ -1,4 +1,5 @@
 export default {
+  route_loading: '页面加载中...',
   opera: '操作',
   back: '返回',
   create: '添加',

src/router/guard.js

@@ -4,7 +4,9 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { ElMessageBox } from 'element-plus'
 import i18n from '@/lang'
-const whiteList = ['/redirect', '/login', '/401', '/404']
+import { UserStore } from '@/store/user'
+
+const whiteList = ['/redirect', '/login', '/401', '/404', '/route/loading']
 NProgress.configure({ showSpinner: false }) // 进度条
 const dontRedirectList = ['/login', '/', '/401', '/404']
 
@@ -18,84 +20,30 @@ export const registerBeforeRouter = async (router) => {
       next()
       return
     }
-    if (token) {
-      NProgress.inc()
-      if (to.path === '/login') next()
-      NProgress.inc()
-      try {
-        const { menus, errcode, errmsg } = await getUserMeta(token)
-        // 登录信息有问题
-        if (errcode !== 0) {
-          if (errcode.includes('FRAMEERROR_401')) {
-            await ElMessageBox.alert(errmsg, i18n.global.t('common.user_confirm'), {
-              confirmButtonText: i18n.global.t('common.re_login'),
-              type: 'error'
-            })
-            const fp = from.path
-            const noneed = dontRedirectList.includes(fp)
-            if (noneed) next('/login')
-            else next(`/login?redirect=${from.fullPath}`)
-            return
-          } else {
-            await ElMessageBox.alert(errmsg, i18n.global.t('common.user_confirm'), {
-              confirmButtonText: i18n.global.t('common.re_login'),
-              type: 'error'
-            })
-            // location.reload()
-            const fp = from.path
-            const noneed = dontRedirectList.includes(fp)
-            if (noneed) next('/login')
-            else next(`/login?redirect=${from.fullPath}`)
-          }
-        }
-        // 菜单格式不正确
-        if (!menus) {
-          next('/401')
-          return
-        }
-        // 检查目的地路由是否注册
-        const hasRoute = hasNecessaryRoute(to, router)
-        NProgress.inc()
-        if (hasRoute || to.meta.hidden) {
-          // 注册了直接进入
-          if (get(from, 'query.redirect')) {
-            const redirect = get(from, 'query.redirect')
-            from.query = {}
-            next(redirect)
-            return
-          } else {
-            next()
-            return
-          }
-        } else {
-          // 没注册就先注册再重定向进入直到进入为止
-          await addUserRoutes(menus, router)
-          NProgress.inc()
-          if (get(from, 'query.redirect')) {
-            const redirect = get(from, 'query.redirect')
-            from.query = {}
-            next(redirect)
-          } else {
-            await next(to)
-          }
-
-          // next({ ...to, replace: true })
-        }
-      } catch (error) {
-        await ElMessageBox.alert(i18n.global.t('common.token_error'), i18n.global.t('common.user_confirm'), {
-          confirmButtonText: i18n.global.t('common.re_login'),
-          type: 'error'
-        })
-        const fp = from.path
-        const noneed = dontRedirectList.includes(fp)
-        if (noneed) next('/login')
-        else next(`/login?redirect=${from.fullPath}`)
-      }
+    if (!token) {
+      // 没有登录信息,返回login,并记录当前路由
+      console.log('no token & not in whiteList')
+      const redirectPath = to.fullPath
+      next({ path: '/login', query: { redirectPath } })
+      return
     } else {
-      const fp = from.path
-      const noneed = dontRedirectList.includes(fp)
-      if (noneed) next('/login')
-      else next(`/login?redirect=${from.fullPath}`)
+      const userStore = UserStore()
+      const userMenus = toRaw(userStore.menus)
+      if (!userMenus || userMenus.length <= 0) {
+        console.log('has token but no menus')
+        // 没有菜单,说明路由没有注册,需要注册路由,记录当前去哪里再跳转至路由
+        let redirectPath = to.fullPath
+        next({ path: '/route/loading', query: { redirectPath } })
+        return
+      } else {
+        // 路由注册了,直接gogogo
+        // 检查有没有redirectPath
+        console.log('continue')
+        let redirectPath = get(to, 'query.redirectPath')
+        if (redirectPath) next(redirectPath)
+        next()
+        return
+      }
     }
   })
 }

src/router/index.js

@@ -5,6 +5,11 @@ export const Layout = () => import('@/layout/index.vue')
 import i18n from '@/lang'
 // 静态路由
 export const constantRoutes = [
+  {
+    path: '/route/loading',
+    component: () => import('@/views/route-loading/index.vue'),
+    meta: { hidden: true }
+  },
   {
     path: '/redirect',
     component: Layout,

src/router/register.js

@@ -33,6 +33,7 @@ export const addUserRoutes = (menus, router) => {
     // 将默认注册的路由平铺成一维数组
     const routesOneDimensional = toOneDimensional(router.getRoutes())
     routesRegister(menuOneDimensional, routesOneDimensional, router)
+    console.log('route adding complete')
     resolve()
   })
 }
@@ -43,7 +44,7 @@ export const addUserRoutes = (menus, router) => {
  * @param {Array} defaultRoutes 默认路由一维数组
  * @param {*} router 路由实例
  */
-export const routesRegister = (menus, defaultRoutes, router) => {
+const routesRegister = (menus, defaultRoutes, router) => {
   // 默认注册位置
   const __def = 'Layout'
   const loadComponent = import.meta.glob('../views/**/*.vue')

src/views/login/index.vue

@@ -52,7 +52,6 @@ const loginData = ref({
 const loginRules = computed(() => {})
 const toLogin = async (data) => {
   const res = await loginStore.login(data)
-  console.log(res)
   if (res.errcode == '0') {
     ElMessage({ message: `登录成功`, type: 'success' })
     localStorage.setItem('token', res.data)

src/views/route-loading/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="index" v-loading.fullscreen.lock="fullscreenLoading" :element-loading-text="$t('common.route_loading')"></div>
+</template>
+
+<script setup>
+import { getUserMeta, addUserRoutes } from '@/router/register'
+import { UserStore } from '@/store/user'
+import { onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { get } from 'lodash-es'
+const fullscreenLoading = ref(true)
+const router = useRouter()
+const route = useRoute()
+const userStore = UserStore()
+// 进了这个页面了.那就是重来注册一遍路由了
+const token = localStorage.getItem('token')
+onMounted(async () => {
+  // 1.获取用户菜单
+  const reqResult = await getUserMeta(token)
+  if (reqResult.errcode !== 0) {
+    // 处理异常
+    return
+  }
+  const menus = get(reqResult, 'menus')
+  // 注册路由
+  await addUserRoutes(menus, router)
+  userStore.setMenus(menus)
+  const rRoute = toRaw(route)
+  let redirectPath = get(rRoute, 'query.redirectPath')
+  if (!redirectPath) redirectPath = '/'
+  router.push(redirectPath)
+})
+</script>
+<style scoped></style>

vite.config.js

@@ -21,6 +21,9 @@ export default defineConfig(({ mode }) => {
     build: {
       outDir: env.VITE_OUT_DIR
     },
+    esbuild: {
+      drop: ['console', 'debugger']
+    },
     server: {
       // 允许IP访问
       host: '0.0.0.0',