在现代 Web 应用中，不同用户拥有不同权限，这需要前端根据用户角色动态控制路由和菜单的显示。Vue3 提供了强大的动态路由机制，结合 Vite 和 Pinia，我们可以轻松构建灵活且安全的权限系统。本文将详细介绍如何实现动态路由，并提供一些实用技巧和优化方案。

动态路由核心概念

动态路由的核心在于根据用户权限实时生成路由配置。不同于静态路由的固定配置，动态路由可以根据用户的角色、权限等信息动态添加或移除路由规则，从而实现页面级别的访问控制。

实现步骤详解

我们的 Vue3 项目中使用了 Vite 构建工具和 Pinia 状态管理库。实现动态路由的关键步骤如下：

1. 1. 后端接口设计: 后端接口需要根据用户角色返回对应的菜单权限数据。数据格式通常为 JSON，包含每个菜单项的 path、name、component 等信息。

2. 2. 前端路由配置: 在前端路由文件 (src/router/index.ts) 中，定义基础路由和动态路由的入口。基础路由通常包括登录、注册等无需权限校验的页面。动态路由入口则作为动态添加路由的占位符。

   // src/router/index.ts
   import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
   
   const routes: RouteRecordRaw[] = [
     // 基础路由
     { path: '/login', name: 'login', component: () => import('../views/Login.vue') },
     // 动态路由入口
     {
       path: '/dashboard',
       name: 'dashboard',
       component: () => import('../views/Dashboard.vue'),
       children: [], //  动态子路由将添加到这里
     },
   ];
   
   const router = createRouter({
     history: createWebHistory(),
     routes,
   });
   
   export default router;

3. 3. 动态添加路由: 在用户登录成功后，获取后端返回的菜单权限数据。将这些数据转换为 RouteRecordRaw 格式，并使用 router.addRoute() 方法动态添加到路由实例中。

    import { useUserStore } from '@/stores/user';
   
    router.beforeEach(async (to, from, next) => {
     const userStore = useUserStore();
     if (to.name !== 'login' && !userStore.user) {
       // 如果用户未登录，重定向到登录页
       next({ name: 'login' });
     } else if (to.name !== 'login' && !router.hasRoute(to.name)) {
       // 动态添加路由
        const menuData = await fetchUserMenu(); // 获取菜单数据
        menuData.forEach(item => {
           router.addRoute('dashboard', {
               path: item.path, 
               name: item.name, 
               component: () => import(`../views/${item.component}.vue`)
           })
       });
   
       // 确保 addRoute 完成后再跳转，避免出现空白页面
       next({ ...to, replace: true }); // 跳转到目标路由
     }
   
     next();
   });

4. 4. Pinia 状态管理: 使用 Pinia 存储用户的权限信息，方便在组件中进行权限控制。

   // stores/user.ts
   import { defineStore } from 'pinia';
   
   export const useUserStore = defineStore('user', {
     state: () => ({
       user: null,
       menu: [],
     }),
     actions: {
       async login(username, password) {
          // 执行登录逻辑 ...
         this.user = user;
         this.menu = await fetchUserMenu(); // 获取菜单数据
       },
       logout() {
         this.user = null;
         this.menu = [];
         //  移除动态添加的路由 
         const routeNames = this.menu.map(item => item.name)
         routeNames.forEach(name => {
           if (router.hasRoute(name)) {
              router.removeRoute(name)
           }
         })
       },
   
     },
   });
   

5. 5. 菜单渲染: 在菜单组件中使用 Pinia 获取用户的菜单权限数据，并根据数据动态渲染菜单项。

高级技巧与优化

1. 1. 401 无权限处理: 当用户访问无权访问的动态路由时，将其重定向到 401 页面，而不是默认的 404 页面，提供更友好的用户提示。为此，我们创建了一个 getDynamicFullPathRoute 函数，获取所有动态路由的完整路径，并在 beforeEach 中进行判断。

2. 2. 本地路由缓存（可选）: 为了减少不必要的请求，可以将动态路由数据缓存在 localStorage 中。这样，只有在用户首次登录或手动清除缓存时，才会重新请求路由数据。当然，你需要根据实际需求权衡缓存策略。

// src/route/index.ts (部分代码)
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { useRoutesStore } from '~/stores/use-routes'

// ... 其他代码

router.beforeEach(async (to, from, next) => {
    // 401处理 (简化示例)
    if (to.path === '/404' && to.redirectedFrom?.fullPath) { 
      if (dynamicRoutes.includes(to.redirectedFrom.fullPath)) {
        next({ name: '401' }) // 跳转到401页面
        return
      }
    }
// ... 其他逻辑

});


// src/stores/use-routes.ts (部分代码)
import { defineStore } from 'pinia'
import type { RouteRecordRaw } from 'vue-router'

export const useRoutesStore = defineStore('userRoutes', {
    // ... 其他代码
})

避免常见的坑

1. 1. 逐个添加路由： 在 Vue3 中，需要使用 router.addRoute() 逐个添加动态路由。

2. 2. 404 路由添加时机： 在所有动态路由添加完成后，再添加 404 路由。

3. 3. 刷新页面处理： 页面刷新后，需要重新获取动态路由，并在 next() 中使用 { ...to, replace: true } 避免导航错误。

总结

通过本文的讲解，相信你已经掌握了使用 Vue3、Vite 和 Pinia 实现动态路由的核心技巧。记住，权限系统的设计需要兼顾安全性和用户体验，动态路由为我们提供了一个优雅的解决方案。

阅读原文：原文链接​