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

版权申诉
5星 · 超过95%的资源 18 下载量 183 浏览量 更新于2024-09-12 1 收藏 235KB PDF 举报
在构建一个基于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实例中,从而实现用户权限下的个性化菜单展示。此方法避免了在初始页面加载时就决定所有路由,使得系统更加灵活且符合业务需求。