vue.js - 存储和检索用户角色

Question

我对 Vue.js 比较陌生。我们的应用程序需要根据用户角色限制/保护对特定页面的访问，因此也只在菜单中显示相应的项目。

我想了解存储用户角色信息并在必要时检索以做出这些决定的推荐方法是什么。

我四处搜索并找到了关于 Vuex Store 的页面，可能存储在 Session Storage 中，甚至是 CASL 之类的库中，但如果有的话，我会更加困惑。

如果有经验丰富的 Vue 开发人员提供任何反馈，我将不胜感激。

标签： vue.js

Answer 1

我建议您将用户数据存储在专用的 Vuex 模块状态（比如“帐户”）中，并创建 getter 来获取计算值，其中之一是isAuthenticated. 检查用户是否通过身份验证的最常见方法是获取状态值（因为默认值应该是null）。

state: {
  account: null
},

actions: { // Here we will fill the account state },

getters: {
  isAuthenticated (state) {
    return Boolean(state.account);
  }
}

PS - 在特殊情况下，用户数据可能存储在 LocalStorage、SessionStorage、Cookies 等中，在这种情况下，您仍然可以通过 Vuex 访问这些数据。但基本上，我们只在这些商店中存储代币。