Vue动态路由与SpringSecurity如何实现按钮级别的权限控制？

本文共计2354个文字，预计阅读时间需要10分钟。

思路：动态路由实现：

在导航守卫中判断用户是否具有用户信息，通过调用接口，获取到后台用户角色的菜单树，将菜单树格式化，并递归生成层级路由表，并使用Vuex进行存储。

1. 在导航守卫中判断用户信息： - 判断用户是否有登录状态。 - 调用用户信息接口，获取用户信息。

2. 通过接口获取菜单树： - 调用菜单树接口，获取后台返回的菜单树数据。

3. 格式化菜单树： - 对菜单树进行格式化，使其符合路由配置的要求。

4. 递归生成层级路由表： - 使用递归函数，将菜单树中的层级关系转换为路由配置。

5. 使用Vuex存储路由表： - 将生成的路由表存储到Vuex中，方便后续使用。

6. 实现动态路由： - 根据用户角色，动态生成路由配置。 - 使用Vue Router的路由动态添加功能，实现动态路由。

思路 ：

动态路由实现:在导航守卫中判断用户是否有用户信息， 通过调用接口，拿到后台根据用户角色生成的菜单树， 格式化菜单树结构信息并递归生成层级路由表并 使用Vuex保存，通过router.addRoutes 动态挂载到 router 上，按钮级别的权限控制,则需使用自定义指令去实现。