Vue 2.0 addRoutes 动态权限路由菜单实现教程

在构建一个基于vue、vue-router、element-ui和vuex的后台管理系统时，开发者面临了动态权限路由菜单的需求。由于系统的单页应用特性，路由实例在初始化时已经注入到vue实例中，导致在用户登录时无法直接修改路由。这个问题在vue-router 2.0版本引入的addRoutes方法中找到了解决方案。 首先，开发者在项目中设置了基础路由，包括登录和404等固定的页面。通过`vue-router`的实例，创建了一个路由配置对象，其中包含一个路径为'/login'的路由，其name为'login'，并设置了meta属性为非授权访问。同时，使用异步加载组件的方式导入登录页面。 为了确保只有登录用户才能访问其他路由，开发者添加了一个全局路由拦截器。这个拦截器会在每次导航前检查目标路由的`meta.requireAuth`属性，如果没有定义或者用户未登录（store中无token），则重定向至登录页面。 接着，关键环节是与后端协作获取用户的权限菜单信息。开发者需要与后端确定数据格式，通常这些信息应包含用户能够访问的路由路径数组。在实际的路由配置中，开发者可能会按照类似这样的结构定义： ```javascript routes: [ { path: '/login', name: 'login', // ...其他属性 }, { // 假设后端返回的权限路由 path: '/dashboard', name: 'dashboard', component: () => import('../components/dashboard/dashboard.vue'), meta: { requireAuth: true, roles: ['admin', 'manager'] } // 角色限制 }, // ...更多动态路由 ] ``` 在这个例子中，每个路由都有可能包含`meta`对象，其中可能包含`requireAuth`字段（是否需要登录）以及特定的权限角色数组。在后端返回权限菜单列表后，开发者可以动态地使用`addRoutes`方法，将这些菜单加入到已有的路由配置中： ```javascript async function addDynamicRoutes(userPermissions) { const dynamicRoutes = userPermissions.map(permission => ({ ...permission, // 保留原有属性 path: `/menu/${permission.path}`, // 假设后端返回的路径形式 })); router.addRoutes(dynamicRoutes); } ``` 这样，当用户登录并携带有效的权限信息时，`addDynamicRoutes`函数会被调用，动态生成的路由会被添加到已有的router实例中，从而实现用户权限下的个性化菜单展示。此方法避免了在初始页面加载时就决定所有路由，使得系统更加灵活且符合业务需求。