如何通过Vuex根据不同用户权限动态调整路由列表显示？

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

需求描述：系统需实现用户分类和权限管理功能。最新需求要求系统根据用户登录后，根据不同用户类型展示不同的功能列表。

功能要点：- 用户分类：根据用户角色进行分类，如管理员、普通用户等。- 权限展示：用户登录后，根据其用户类型展示相应的功能列表。- 管理便捷：后台管理中常见此功能，通过返回用户类型实现。

实现思路：- 用户登录时，系统根据用户类型识别权限。- 根据用户类型，动态生成功能列表并展示给用户。

需求描述

最近接到一个新的需求，要求将系统的用户进行分类，用户登陆后根据不同的用户权限展示不同的功能列表。

这个功能在后台管理中很常见，大致的思路是

后台返回用户类型，前端根据用户类型生成该类用户可以访问的功能列表。
后台返回功能列表，前端进行循环渲染。

一个在前端生成功能列表，一个在后端返回，两个本质上类似，最终都是需要得到一个该用户的功能功能列表。但是两者都有一个不可忽视的东西，就是如果用户直接在地址栏输入会怎么样。

技术选型

由于公司项目不算小，为了后期维护方便，我还是选择了使用 vuex 完成上述的功能。