Vue 2.0 addRoutes 动态权限路由菜单实现教程
版权申诉
5星 · 超过95%的资源 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实例中,从而实现用户权限下的个性化菜单展示。此方法避免了在初始页面加载时就决定所有路由,使得系统更加灵活且符合业务需求。
2020-10-16 上传
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
最新资源
- Android圆角进度条控件的设计与应用
- mui框架实现带侧边栏的响应式布局
- Android仿知乎横线直线进度条实现教程
- SSM选课系统实现:Spring+SpringMVC+MyBatis源码剖析
- 使用JavaScript开发的流星待办事项应用
- Google Code Jam 2015竞赛回顾与Java编程实践
- Angular 2与NW.js集成:通过Webpack和Gulp构建环境详解
- OneDayTripPlanner:数字化城市旅游活动规划助手
- TinySTM 轻量级原子操作库的详细介绍与安装指南
- 模拟PHP序列化:JavaScript实现序列化与反序列化技术
- ***进销存系统全面功能介绍与开发指南
- 掌握Clojure命名空间的正确重新加载技巧
- 免费获取VMD模态分解Matlab源代码与案例数据
- BuglyEasyToUnity最新更新优化:简化Unity开发者接入流程
- Android学生俱乐部项目任务2解析与实践
- 掌握Elixir语言构建高效分布式网络爬虫