vue后台系统路由菜单动态权限控制

需求:

现有一个后台管理系统,涉及到用户权限菜单的问题,即不同的用户登录,根据权限的不同展示不同的菜单。

回答:

实现思路

第一种方法:动态添加路由,将完整路由整合到一起,并从路由表中提取出菜单;
1、先将不需要权限(静态)的页面先挂载到new Router路由实例上,并export出去。
2、当用户登录后,获取用户的权限信息,然后根据用户的权限(role或某个标识)调后端接口取到路由表。
3、调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由(注意:这里有个hack方法  next({ ...to, replace:true}) // hack方法 确保addRoutes已完成 ,setthe replace:trueso the navigation will not leave ahistoryrecord })
4、将所有的路由表存到根标签内(也有将路由表存到vuex里,根据vuex中的路由表来渲染菜单)

第二种方法:将路由和菜单分开,前端完全控制路由,菜单从后端获取。
1、前端控制整个系统的完整路由,自行进行增减路由表。
2、根据用户权限调后端接口获取可访问的菜单列表,并根据数据规则进行重组。
3、将获取的菜单数据列表Array绑定到菜单SideBar上,渲染侧边栏组件 。

值得说明的是,这些页面级别的权限控制,虽然已经在前端做了,但是只在前端做是不够的,后端也依然要做接口层面的权限控制。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言:关于vue权限路由的那些事儿…… 项目背景:现有一个后台管理系统,共存在两种类型的人员 ①超级管理员(称作a...
    NXMIN_8e0b阅读 6,093评论 2 12
  • 使用全局路由守卫 实现 前端定义好路由,并且在路由上标记相应的权限信息 全局路由守卫每次都判断用户是否已经登录,没...
    若邪Y阅读 30,913评论 4 54
  • 完整项目地址:vue-element-admin系类文章一:手摸手,带你用vue撸后台 系列一(基础篇) 前言 拖...
    7cd975786ccd阅读 10,830评论 4 65
  • 学习总结vue后台管理系统 后台页面的权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基...
    寻心途阅读 2,398评论 0 4
  • 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(...
    jeanzy阅读 3,561评论 0 2