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

·  阅读 1063

需求:

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

回答:

实现思路

第一种方法:动态添加路由,将完整路由整合到一起,并从路由表中提取出菜单;
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上,渲染侧边栏组件 。


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


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改