'admin-21.02.25:处理后端控制路由(页面刷新问题未处理)'

src/api/menu/testMenu.json

@@ -39,60 +39,6 @@
                 "icon": "iconfonticon-quanxian"
             },
             "children": [
-                {
-                    "path": "/limits/frontEnd",
-                    "name": "limitsFrontEnd",
-                    "component": "layout/routerView/parent",
-                    "redirect": "/limits/frontEnd/page",
-                    "meta": {
-                        "title": "前端控制",
-                        "isLink": "",
-                        "isHide": false,
-                        "isKeepAlive": true,
-                        "isAffix": false,
-                        "isIframe": false,
-                        "auth": [
-                            "admin",
-                            "test"
-                        ]
-                    },
-                    "children": [
-                        {
-                            "path": "/limits/frontEnd/page",
-                            "name": "limitsFrontEndPage",
-                            "component": "limits/frontEnd/page/index",
-                            "meta": {
-                                "title": "页面权限",
-                                "isLink": "",
-                                "isHide": false,
-                                "isKeepAlive": true,
-                                "isAffix": false,
-                                "isIframe": false,
-                                "auth": [
-                                    "admin",
-                                    "test"
-                                ]
-                            }
-                        },
-                        {
-                            "path": "/limits/frontEnd/btn",
-                            "name": "limitsFrontEndBtn",
-                            "component": "limits/frontEnd/btn/index",
-                            "meta": {
-                                "title": "按钮权限",
-                                "isLink": "",
-                                "isHide": false,
-                                "isKeepAlive": true,
-                                "isAffix": false,
-                                "isIframe": false,
-                                "auth": [
-                                    "admin",
-                                    "test"
-                                ]
-                            }
-                        }
-                    ]
-                },
                 {
                     "path": "/limits/backEnd",
                     "name": "limitsBackEnd",

src/router/index.ts

@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
-import NProgress from 'nprogress';
+import NProgress from 'nprogress'
-import 'nprogress/nprogress.css';
+import 'nprogress/nprogress.css'
 import { store } from "/@/store/index.ts"
 import { getSession, clearSession } from "/@/utils/storage.ts"
 import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts'
@@ -452,17 +452,22 @@ const staticRoutes: Array<RouteRecordRaw> = [
         meta: {
             title: '没有权限'
         }
-    },
-    {
-        path: '/:pathMatch(.*)',
-        name: 'pathMatch',
-        redirect: '/404',
-        meta: {
-            title: '页面找不到重定向'
-        }
     }
 ]
 
+// 定义404界面
+const pathMatch = {
+    path: '/:pathMatch(.*)',
+    name: 'pathMatch',
+    component: () => import('/@/views/error/404.vue'),
+    meta: {
+        title: '页面找不到重定向'
+    }
+}
+
+// 获取目录下的 .vue 全部文件，参考 vite：import.meta.glob
+const dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}')
+
 // 添加静态路由
 const router = createRouter({
     history: createWebHashHistory(),
@@ -470,72 +475,66 @@ const router = createRouter({
 })
 
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-// console.log(store)
-// console.log(dynamicRoutes)
 // store.dispatch('setBackEndControlRoutes', 'admin')
 export function getBackEndControlRoutes() {
-    getMenuTest().then((res: any) => {
+    store.dispatch('setUserInfos')
-        console.log(JSON.parse(JSON.stringify(res)));
+    NProgress.remove()
-        // console.log(backEndRouter(res.data))
+    const auth = store.state.userInfos.authPageList[0] // 模拟 admin 与 test
-        dynamicRoutes[0].children = backEndRouter(res.data)
+    if (auth !== 'admin') {
-        dynamicRoutes[0].children = res.data
+        getMenuAdmin().then((res: any) => {
-        console.log(dynamicRoutes)
+            setBackEndControlRoutesFun(res)
-        // initAllFun()
+        })
-        store.dispatch('setUserInfos')
+    } else {
-        setAddRoute() // 添加动态路由
+        getMenuTest().then((res: any) => {
-        setFilterMenu() // 过滤权限菜单
+            setTimeout(() => {
-        setCacheTagsViewRoutes() // 添加 keepAlive 缓存
+                setBackEndControlRoutesFun(res)
-        // console.log(router.getRoutes())
+            }, 500)
-    });
+        })
+    }
 }
 
-// export function loadView(path: string) {
+// 后端控制路由，模拟执行路由初始化
-//     return () => import(`../views/${path}.vue`)
+export function setBackEndControlRoutesFun(res: any) {
-// }
+    const oldRoutes = JSON.parse(JSON.stringify(res.data))
-
+    store.dispatch('setBackEndControlRoutes', oldRoutes)
-// 后端控制路由，递归处理每一项 `component` 中的路径
+    dynamicRoutes[0].children = backEndRouter(res.data)
-// export function backEndRouter(routes: any) {
+    setAddRoute() // 添加动态路由
-//     if (!routes) return false
+    router.addRoute(pathMatch) // 添加404界面
-//     return routes.map((v: any) => {
+    setFilterMenu() // 过滤权限菜单
-//         if (v.component) v.component = () => import(`../views${v.component}.vue`)
+    setCacheTagsViewRoutes() // 添加 keepAlive 缓存
-//         if (v.children) v.children = backEndRouter(v.children)
+    // window.location.href = window.location.href // 页面刷新时，防止404（未找到方法，临时使用，控制台报黄）
-//         return v
+    console.log(store)
-//     })
+}
-// }
-
-const dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}');
-
-console.log(dynamicViewsModules)
-
 
+// 后端控制路由，后端路由 component 转换
 export function backEndRouter(routes: any) {
-    if (!routes) return;
+    if (!routes) return
-    return routes.forEach((item: any) => {
+    return routes.map((item: any) => {
-        const { component } = item;
+        const { component } = item
-        const { children } = item;
+        const { children } = item
-        if (component) item.component = dynamicImport(dynamicViewsModules, component as string);
+        if (component) item.component = dynamicImport(dynamicViewsModules, component as string)
-        children && backEndRouter(children);
+        children && backEndRouter(children)
         return item
-    });
+    })
 }
 
+// 后端控制路由，后端路由 component 转换函数
 export function dynamicImport(
-    dynamicViewsModules: Record<string, () => Promise<{ [key: string]: any; }>>,
+    dynamicViewsModules: Record<string, () => Promise<{ [key: string]: any }>>,
     component: string
 ) {
-    const keys = Object.keys(dynamicViewsModules);
+    const keys = Object.keys(dynamicViewsModules)
     const matchKeys = keys.filter((key) => {
-        const k = key.replace('../views', '');
+        const k = key.replace('../views', '')
-        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+        return k.startsWith(`${component}`) || k.startsWith(`/${component}`)
-    });
+    })
-    console.log(matchKeys)
     if (matchKeys?.length === 1) {
-        const matchKey = matchKeys[0];
+        const matchKey = matchKeys[0]
-        return dynamicViewsModules[matchKey];
+        return dynamicViewsModules[matchKey]
     }
     if (matchKeys?.length > 1) {
-        console.warn('Please do not create');
+        console.warn('Do not create files that do not end with. Vue')
-        return false;
+        return false
     }
 }
 
@@ -607,7 +606,7 @@ export function setFilterMenuFun(routes: any, auth: any) {
 export function setFilterRoute() {
     let filterRoute: any = []
     formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => {
-        route.meta.auth.map((metaAuth: any) => {
+        if (route.meta.auth) route.meta.auth.map((metaAuth: any) => {
             store.state.userInfos.authPageList.map((auth: any) => {
                 if (metaAuth === auth) filterRoute.push({ ...route })
             })
@@ -640,20 +639,17 @@ export function resetRoute() {
 
 // 初始化方法，防止刷新时丢失 
 export function initAllFun() {
-    const token = getSession('token')
+    store.dispatch('setUserInfos') // 触发初始化用户信息
-    if (!token) return false
+    setAddRoute() // 添加动态路由
-    setTimeout(() => {
+    router.addRoute(pathMatch) // 添加404界面
-        store.dispatch('setUserInfos')
+    setFilterMenu() // 过滤权限菜单
-        setAddRoute() // 添加动态路由
+    setCacheTagsViewRoutes() // 添加 keepAlive 缓存
-        setFilterMenu() // 过滤权限菜单
-        setCacheTagsViewRoutes() // 添加 keepAlive 缓存
-    }, 1000)
 }
 
 // 初始化方法执行
-if (!store.state.themeConfig.isRequestRoutes) initAllFun()
+if (!store.state.themeConfig.isRequestRoutes && getSession('token')) initAllFun()
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
-if (store.state.themeConfig.isRequestRoutes) getBackEndControlRoutes()
+if (store.state.themeConfig.isRequestRoutes && getSession('token')) getBackEndControlRoutes()
 
 // 路由加载前
 router.beforeEach((to, from, next) => {
@@ -674,7 +670,7 @@ router.beforeEach((to, from, next) => {
             next('/home')
             NProgress.done()
         } else {
-            next();
+            next()
         }
     }
 })

src/store/index.ts

@@ -48,7 +48,8 @@ export interface RootStateTypes {
     routes: Array<object>,
     keepAliveNames: Array<string>,
     tagsViewRoutes: Array<object>,
-    userInfos: object
+    userInfos: object,
+    requestOldRoutes: Array<object>,
 }
 
 export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@@ -59,7 +60,8 @@ export const store = createStore<RootStateTypes>({
         routes: [],
         keepAliveNames: [],
         tagsViewRoutes: [],
-        userInfos: {}
+        userInfos: {},
+        requestOldRoutes: []
     },
     mutations: {
         // 设置布局配置
@@ -82,6 +84,10 @@ export const store = createStore<RootStateTypes>({
         getUserInfos(state: any, data: object) {
             state.userInfos = data
         },
+        // 后端控制路由
+        getBackEndControlRoutes(state: any, data: object) {
+            state.requestOldRoutes = data
+        },
     },
     actions: {
         // 设置布局配置
@@ -109,10 +115,8 @@ export const store = createStore<RootStateTypes>({
             }
         },
         // 后端控制路由
-        async setBackEndControlRoutes({ commit }, query: string) {
+        setBackEndControlRoutes({ commit }, routes: Array<string>) {
-            if (query === 'admin') {
+            commit('getBackEndControlRoutes', routes)
-
-            } else { }
         }
     }
 })

src/utils/themeConfig.ts

@@ -39,5 +39,5 @@ export default {
     animation: 'slideRight',
     columnsAsideStyle: 'columnsRound',
     layout: 'defaults',
-    isRequestRoutes: false
+    isRequestRoutes: true
 }

src/views/login/component/account.vue

@@ -39,6 +39,7 @@ import {
   setAddRoute,
   setFilterMenu,
   setCacheTagsViewRoutes,
+  getBackEndControlRoutes,
 } from "/@/router/index.ts";
 import { useStore } from "/@/store/index.ts";
 import { setSession } from "/@/utils/storage.ts";
@@ -100,11 +101,19 @@ export default defineComponent({
         authPageList: defaultAuthPageList,
         authBtnList: defaultAuthBtnList,
       };
+      // 存储 token 到浏览器缓存
       setSession("token", Math.random().toString(36).substr(0));
+      // 存储用户信息到浏览器缓存
       setSession("userInfo", userInfos);
-      store.dispatch("setUserInfos", userInfos); // 请注意执行顺序(存储用户信息vuex)
+      // 1、请注意执行顺序(存储用户信息到vuex)
-      initAllFun(); // 请注意执行顺序
+      store.dispatch("setUserInfos", userInfos);
+      // 前端控制路由，2、请注意执行顺序
+      if (store.state.themeConfig.isRequestRoutes) initAllFun();
+      // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+      else getBackEndControlRoutes();
+      // 登录成功，跳到转首页
       router.push("/");
+      // 登录成功提示
       setTimeout(() => {
         ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
       }, 300);