vue3 动态路由怎么实现，又文 怎么解决每次只请求一次token和菜单路由

其实所有代码都放在下面了，但还是描述下思路：

1. 通过token判断是否登陆
2. 通过store里面user是不是有数据，看是否要重新请求用户数据
3. 判断菜单store里面有没有存过菜单数据，
4. 看是否匹配到路由了，没有匹配到就去404

import { useAsyncMenusStore } from "@/store/menus";
import { useUserStore } from "@/store/user";
import { getToken, removeToken } from "@/utils/auth";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({ showSpinner: false }); // 进度条

export default (router) => {

  // 白名单路由
  const whiteList = ["/login"];
  router.beforeEach(async (to, from, next) => {
    NProgress.start();
    const hasToken = getToken();
    if (hasToken) {
      if (to.path === "/login") {
        // 如果已登录，跳转首页
        next({ path: "/" });
        NProgress.done();
      } else {
        // debugger
        const userStore = useUserStore();

        if (!userStore.user.userId) {
          await userStore.getUserInfo()
        }
        try {
          const menusStore = useAsyncMenusStore();
          if (menusStore.menus?.length === 0) {
            await menusStore.getMenus()
            next({ ...to, replace: true });
          }
          if (to.matched.length === 0) {
            from.name ? next({ name: from.name }) : next("/404");
          } else {
            next();
          }
        } catch (error) {
          // 移除 token 并跳转登录页
          // await userStore.resetStore();
          removeToken()
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
        // }
      }
    } else {
      // 未登录可以访问白名单页面
      if (whiteList.indexOf(to.path) !== -1) {
        next();
      } else {
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  });

  router.afterEach(() => {
    NProgress.done();
  });
}