需求描述

最近又收到了新的要求，要求对系统的用户进行分类，用户登录后可以根据不同的用户权限显示不同的功能列表。

这个功能在后台管理中非常常见。总的想法是

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

一个在前端生成函数列表，另一个在后端返回。两者本质上是相似的，最终都需要得到用户功能的功能列表。但两者都有一点不能忽视，那就是如果用户直接在地址栏输入会发生什么。

技术选择

因为公司项目不小，为了方便后期维护，我选择了使用vuex来完成以上功能。

主要思想是在vuex中保存用户登录后的状态和用户可访问的路由表。这样就不涉及父组件和子组件之间的数据传输，在单个组件中就可以轻松获取用户的权限路由表。

状态管理

如果你只想简单地使用一个vuex，知道状态、突变、动作动作就足够你使用了。

在src文件夹下，创建一个存储文件夹。如果项目很简单，你可以写状态、变量、动作、getters等。变成一个文件

主要代码很简单，只需导入vue和vuex，调用Vue.use(Vuex)。

根据官方解释的个人理解，一个vuex文件就是一个仓库，里面包含了你需要共享的变量，相关事件，以及可以执行这些事件的行为。我们将它们导出并导入到单个组件中，这样我们就可以在单个组件中更改共享变量。

从“Vue”导入Vue；从“Vuex”导入Vuex；vue . use(Vuex)；导出默认的新Vuex。存储({state})状态

状态的主要功能是定义变量，表示您需要共享的状态。例如，我想共享用户可以访问的路由表，所以我需要在状态中定义一个变量来存储路由表。

In store/index.js

从“Vue”导入Vue；从“Vuex”导入Vuex；vue . use(Vuex)；const state={ presonlist :[]，//Login Tag3360 false，允许用户登录的路由列表//User log in state }导出默认新vuex。store ({state})在单个组件中使用state有两种方式，即直接获取或使用mapState辅助工具。

摘要

如上所述，边肖推出的vuex针对不同的用户权限展示了不同的路由表功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！