当前位置: 首页 > Web前端 > vue.js

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

时间:2023-04-01 13:09:56 vue.js

需求:现有一个后台管理系统,涉及到用户权限菜单的问题,即不同的用户登录,根据不同的权限显示不同的菜单。答:第一种实现思路:动态添加路由,将完整的路由整合在一起,从路由表中提取菜单;1.先将不需要权限的页面(静态)挂载到新的Router路由实例上,并export出来。2、用户登录后,获取用户的权限信息,然后根据用户的权限(角色或某个标识)调整后台接口获取路由表。3.调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由(注意:这里有一个hack方法next({...to,replace:true})//hack方法保证addRoutes有完成后,设置replace:true,这样导航就不会留下历史记录了})4.将所有路由表保存在根标签中(也将路由表保存在vuex中,根据vuex中的路由表渲染菜单)方法二:把路由和菜单分开,前端完全控制路由,菜单从后端拉取。1、前端控制整个系统的完整路由,可以自行增减路由表。2、调整后台接口,根据用户权限获取可访问的菜单列表,按照数据规则重新组织。3.将获取的菜单数据列表Array绑定到菜单SideBar,渲染侧边栏组件。值得注意的是,虽然这些页面级别的权限控制已经在前端做了,但是只在前端做是不够的,后端还需要在界面级别进行权限控制。