问基于Vue JS角色的身份认证和路由

EN

有很多方法可以这样做，您的目标是将有关用户的数据加载到应用程序中。

解决这一问题的一种方法是创建一个API函数，返回有关当前登录用户的信息。对请求的身份验证可以通过cookie、jwt头或其他方法来完成。

用于获取经过身份验证的用户数据的api调用还将帮助您了解应用程序启动时用户是否已经登录。

撇开如何提出网络请求不谈，让我们假设您现在有了应用程序中的数据。

关于如何存储它有几个选择，这是一个架构选择，因为其结果可能会对应用程序的许多其他部分产生影响。

存储应用程序范围(全局)状态的常见解决方案是使用Vuex。这也将与vue-路由器一起玩得很好。

让我们说，在Vuex中，您将创建一个字段roles，该字段将包含一个字符串数组，指示用户所具有的角色。在vue组件中，您可以从$store属性(代码中的this.$store，模板中的$store )到达vuex存储。然后可以通过$store.state访问存储的状态，您的角色数组将在$store.state.roles上存在。

要设置角色，必须设置可以保存角色的突变，api调用将是操作的一部分。您可以在vuex文档中更多地了解如何更新状态。