Vue3 动态路由实战：手把手教你打造你的权限系统，精准权限控制，提升用户体验

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

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

动态路由核心概念

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

实现步骤详解

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

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

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.动态添加路由:在用户登录成功后，获取后端返回的菜单权限数据。将这些数据转换为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.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.菜单渲染:在菜单组件中使用 Pinia 获取用户的菜单权限数据，并根据数据动态渲染菜单项。

高级技巧与优化

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

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.逐个添加路由：在 Vue3 中，需要使用router.addRoute()逐个添加动态路由。

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

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

总结

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

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！