Vuex getter 在组件中获取用户角色

Question

我是 Vue.js Vuex 和 Firebase 开发新手，我正在尝试根据用户角色显示不同的导航栏项目。 我目前正在从 Firebase 获取用户数据作为对象并将其传递给商店。

我尝试在 vuex 中使用 getter 来检查用户角色，只有当用户是角色“管理员”时它才有效。

这是我的吸气剂：

isAuthenticated (state) {
  return state.user
},
userAuth: state => state.user.roles === 'thinker'|| 'e-libre' || 'hacker' || 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || 'admin',
devAuth: state => state.user.roles === 'dev' || 'admin',
adminAuth: state => state.user.roles === 'admin',

我希望这些函数在我的组件的计算属性中返回一个布尔值，以便我可以检查用户是管理员还是例如审阅者，以便我可以显示不同的项目。

这是我的计算函数

computed: {
app$(): IApp {
  return this.$store.state;
},
isAuthenticated () {
  return this.$store.getters.isAuthenticated
},
adminAuth () {
  return this.$store.getters.adminAuth
},
reviewerAuth () {
  return this.$store.getters.reviewerAuth
},

然后我不知道为什么当用户角色是“管理员”而不是用户作为另一个角色时这个功能可以正常工作。

adminItems () {
    if (this.adminAuth) {
      return [
        { text: 'Admin', icon: 'lock', subheader: 'admin',
          children: [
            { text: 'Management', route: '/management', icon: ''},
            { text: 'Settings', route: '/settings', icon: ''}
          ]
        }
      ]
    }
}

例如当用户作为角色审阅者时，reviewerAuth 正在返回 undefined：

 <v-list-tile v-if="!adminAuth||!reviewerAuth" to="/" avatar>
          <v-list-tile-avatar>
          <v-icon>translate</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>Devenir reviewer</v-list-tile-title>
          </v-list-tile-content>

        </v-list-tile>
        <v-divider v-if="!adminAuth||!reviewerAuth"></v-divider>
        <v-list-tile
        v-for="(item, index) in userItems"
        :key="index"
        :to="item.path"
        avatar
        @click="">
        <v-list-tile-avatar>
        <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-avatar>
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>

        </v-list-tile>

我在那里缺少什么？我有点同时在学习 javascript，感觉我做的完全错了。

非常感谢您的帮助

菲尔莫

Answer 1

您有一个简单的问题，即检查的语法不正确。考虑

1 === 2 || 'hello'

这会返回：hello。

同样，您也有类似的错误：

userAuth: state => state.user.roles === 'thinker'|| 'e-libre' || 'hacker' || 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || 'admin',
devAuth: state => state.user.roles === 'dev' || 'admin',
adminAuth: state => state.user.roles === 'admin',

应该改为：

userAuth: state => state.user.roles === 'thinker'|| state.user.roles === 'e-libre' || state.user.roles === 'hacker' || state.user.roles === 'admin',
reviewerAuth: state => state.user.roles === 'reviewer' || state.user.roles === 'admin',
devAuth: state => state.user.roles === 'dev' || state.user.roles === 'admin',
adminAuth: state => state.user.roles === 'admin',