vue3 根据不同的用户，路由显示不同的文件

Question

我想要根据不同的客户加载不同的路由文件
比如登录页面，客户A加载LoginA.vue，客户B加载LoginB.vue

我最开始的构想是在main.js中调用后台方法，获取到当前的client名字，并且存在localStorage中，然后在router文件夹下的index.js去获取localStorage的client名字，根据名字来加载对应的LoginA.vue还是LoginB.vue

结果我惊奇的发现，在index里面的console.log会比main.js执行的要快，所以顺序是有问题的（不知道这是为什么，不是main.js是最早执行的吗，console为什么又反了）

于是我试着把方法直接写在router/index.js里面，然后发现好像这样也不行

//index.js

import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} from 'vue-router';
import Login from '../views/Login.vue';
import Index from '../views/Index.vue';
import axios from "@/api/http";

let client = null;


// 获取当前的用户
async function getClient() {
    await axios.request({
        method: 'GET',
        url: '/cms/config',
    }).then(res => {
        client = res.data.Client;
        console.log("==== 11111111=====", client)
    }).catch(err => {
        console.log(err);
    })
}
getClient();
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: 'Login',
       ** component: () => {
            console.log("==== client222222=====", client)
            if (client == 'companyA') {
                return import('../views/companyA/Login.vue')
            } else {
                return import('../views/Login.vue')
            }
        },**
    },
    {
        path: '/registration',
        name: 'Registration',
        component: () => {
            if (client == 'companyA') {
                return import('../views/companyA/Registration.vue')
            } else {
                return import('../views/Registration.vue')
            }
        },
        // component: () => import ('../views/Registration.vue')
    },
    {
        path: '/mec',
        name: 'Mec',
        component: () => import ('../views/mec.vue')
    },
    {
        path: '/test',
        name: 'Test',
        component: () => import('../views/test.vue'),
    },
    {
        path: '/index',
        name: 'Index',
        component: Index,
        redirect: '/home',
        children: [
            // {
            //   path: 'home',
            //   name: 'Home',
            //   component: () => import('../views/mainPage/navHome.vue')
            // },
            {
                path: '/home',//子组件的路径前加'/'则默认为根路由，url上就不显示父组件的path，即/home。如果不加'/'，则会显示父组件的path，如/index/home
                name: 'Home',
                meta: {
                    keepAlive: true,
                },
                component: () => {
                    return import('../views/mainPage/navHome.vue')
                    // if(false){
                    //   return import('../views/mainPage/hpe/navHome.vue')
                    // }else{
                    //   return import('../views/mainPage/navHome.vue')
                    // }
                },
            },
            {
                path: '/allContents',
                name: 'AllContents',
                component: () => import('../views/mainPage/navAllContents.vue')
            },
            {
                path: '/tracks',
                name: 'Tracks',
                component: () => import('../views/mainPage/navTracks.vue')
            },
            {
                path: '/content',
                name: 'Content',
                component: () => import('../views/mainPage/navContent.vue')
            },
            {
                path: '/contributors',
                name: 'Contributors',
                component: () => import('../views/mainPage/navContributors.vue')
            },
            {
                path: '/presentation',
                name: 'Presentation',
                component: () => import('../views/mainPage/navPresentation.vue')
            },
            {
                path: '/notification',
                name: 'Notification',
                component: () => import('../views/mainPage/navNotification.vue')
            },
            {
                path: '/favorites',
                name: 'Favorites',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/navFavorites.vue')
            },
            {
                path: '/agenda',
                name: 'Agenda',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/Agenda.vue')
            },
            {
                path: '/searchAgenda',
                name: 'searchAgenda',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/searchAgenda.vue')
            },
            {
                path: '/keynotes',
                name: 'KeyNotes',
                meta: {
                    keepAlive: true,
                },
                component: () => import('../views/mainPage/navKeyNotes.vue')
            },
        ]
    }
];
const router = createRouter({
    history: createWebHashHistory(),
    // history: createWebHistory(process.env.BASE_URL),
    // history: createWebHistory(),
    routes
});

export default router;

执行的顺序还是有问题,在component里面打印的client是null，

有没有遇到过类似问题的朋友们知道该怎么处理这种情况呀

Answer 1

axios.request是异步执行的，定义routes的时候ajax并没有返回设置client的值，所以为null。改下面试试，component改为异步函数

    async function getClient() {
        await axios.request({
            method: 'GET',
            url: '/cms/config',
        }).then(res => {
            client = res.data.Client;
            console.log("==== 11111111=====", client)
        }).catch(err => {
            console.log(err);
        })
    }

    //getClient();///这个不需要了，不会拦截下面代码执行
    const routes: Array<RouteRecordRaw> = [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'Login',
            component: async () => {
                if (client == null) await getClient();////////////////
                console.log("==== client222222=====", client)
                if (client == 'companyA') {
                    return import('../views/companyA/Login.vue')
                } else {
                    return import('../views/Login.vue')
                }
            },
        },
        {
            path: '/registration',
            name: 'Registration',
            component: async () => {
                if (client == null) await getClient();////////////////
                if (client == 'companyA') {
                    return import('../views/companyA/Registration.vue')
                } else {
                    return import('../views/Registration.vue')
                }
            },
            // component: () => import ('../views/Registration.vue')//
        },