【vue】更改角色权限后，实现页面不刷新更改其可展示的导航菜单

栀妹儿

于 2023-08-21 17:23:01 发布

阅读量903

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_38990605/article/details/132412212

版权

文章描述了如何通过后端接口获取不同角色的菜单路由，存储在store中，利用事件总线实现实时导航菜单更新，且在角色权限改变时，不刷新页面重置路由的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

登入的角色本身属于领导级别（集团权限），没有下级的不同权限：
在这里插入图片描述
切换不同身份（公司），以获得相应部门的不同导航菜单及权限

这里实现：更改角色权限后，实现页面 不刷新 更改其展示出来的 导航菜单

1、在右上角页面代码内，通过后端接口获取子角色（公司）的对应菜单路由（图2中data）
2、将路由数据和自身代码写入方式一样，写入store存储路由数据（参考自己代码首次获取路由后存储数据的方法）
3、通过事件总线$eventBus监听页面路由替换导航
4、清空、重新添加路由$router.addRoutes

在这里插入图片描述
导航组件里监听并操作：

代码片：

async toMenuChange(id) {
   
	//...省略前面非必要 此处调用自己的接口
	await getMenuListChange().then((mresult

最低0.47元/天解锁文章