vue3-10

动态路由与菜单

路由文件

a6router.ts

import { createRouter, createWebHashHistory } from "vue-router";
import { useStorage } from "@vueuse/core";
import { Route, Menu } from "../model/Model8080";
const clientRoutes = [
  {
    path: "/login",
    name: "login",
    component: () => import("../views/A6Login.vue"),
  },
  {
    path: "/404",
    name: "404",
    component: () => import("../views/A6NotFound.vue"),
  },
  {
    path: "/",
    name: "main",
    component: () => import("../views/A6Main.vue"),
  },
  {
    path: "/:pathMatcher(.*)*",
    name: "remaining",
    redirect: "/404",
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes: clientRoutes,
});

export const serverMenus = useStorage("serverMenus", []);
const serverRoutes = useStorage("serverRoutes", []);
addServerRoutes(serverRoutes.value);

export function addServerRoutes(routeList: Route[]) {
  for (const r of routeList) {
    if (r.parentName) {
      router.addRoute(r.parentName, {
        path: r.path,
        component: () => import(r.component),
        name: r.name,
      });
    }
  }
  serverRoutes.value = routeList;
}

export function resetRoutes() {
  for (const r of clientRoutes) {
    router.addRoute(r);
  }
  serverRoutes.value = null;
  serverMenus.value = null;
}

export default router;

export interface Route {
  path: string;
  component: string;
  name: string;
  parentName: string;
}

export interface Menu {
  id: number;
  pid: number;
  title: string;
  icon?: string;
  routePath?: string;
  routeComponent?: string;
  routeName?: string;
  routeParentName?: string;
  children?: Menu[];
}

本文件重要的函数及变量

• addServerRoutes 函数向路由表中添加由服务器提供的路由，路由分成两部分

  • clientRoutes 这是客户端固定的路由

  • serverRoutes 这是服务器变化的路由，存储于 localStorage

• resetRoutes 函数用来将路由重置为 clientRoutes

  • vue-router@4 中的 addRoute 方法会【覆盖】同名路由，这是这种实现的关键

  • 因此，服务器返回的路由最好是 main 的子路由，这样重置时就会比较简单，用之前的 main 一覆盖就完事了

• serverMenus 变量记录服务器变化的菜单，存储于 localStorage

• 登录组件

  动态路由应当在登录时生成，A6Login.vue

• 登录成功后去请求 /api/menu/{username} 获取该用户的菜单和路由

• router.push 方法用来以编程方式跳转至主页路由

主页组件

A6Main.vue

token 使用

1. 获取用户信息，例如服务器端可以把用户名、该用户的路由、菜单信息都统一从 token 返回

2. 前端路由跳转依据，例如跳转前检查 token，如果不存在，表示未登录，就避免跳转至某些路由

3. 后端 API 访问依据，例如每次发请求携带 token，后端需要身份校验的 API 需要用到