Vue 2.0 addRoutes 动态权限路由菜单实现教程
版权申诉
5星 · 超过95%的资源 48 浏览量
更新于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实例中,从而实现用户权限下的个性化菜单展示。此方法避免了在初始页面加载时就决定所有路由,使得系统更加灵活且符合业务需求。
2020-12-13 上传
2020-12-11 上传
2020-10-16 上传
2020-08-29 上传
2020-10-14 上传
2020-08-29 上传
2020-08-27 上传
点击了解资源详情
2020-10-16 上传
weixin_38674415
- 粉丝: 5
- 资源: 920
最新资源
- 构建基于Django和Stripe的SaaS应用教程
- Symfony2框架打造的RESTful问答系统icare-server
- 蓝桥杯Python试题解析与答案题库
- Go语言实现NWA到WAV文件格式转换工具
- 基于Django的医患管理系统应用
- Jenkins工作流插件开发指南:支持Workflow Python模块
- Java红酒网站项目源码解析与系统开源介绍
- Underworld Exporter资产定义文件详解
- Java版Crash Bandicoot资源库:逆向工程与源码分享
- Spring Boot Starter 自动IP计数功能实现指南
- 我的世界牛顿物理学模组深入解析
- STM32单片机工程创建详解与模板应用
- GDG堪萨斯城代码实验室:离子与火力基地示例应用
- Android Capstone项目:实现Potlatch服务器与OAuth2.0认证
- Cbit类:简化计算封装与异步任务处理
- Java8兼容的FullContact API Java客户端库介绍