Блог

Я новичок в разработке с Vue.js Vuex и Firebase, и я пытаюсь показать разные элементы навигационной панели в зависимости от роли пользователя. В настоящее время я извлекаю пользовательские данные из Firebase в виде объекта и передаю их в хранилище.

Я попытался использовать геттеры в vuex для проверки роли пользователя, и это вроде как работает, только если пользователь в роли «администратор».

Вот мои получатели:

 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 и чувствую, что делаю это совершенно неправильно.

Большое спасибо за вашу помощь

Philmo

У вас простая проблема, когда синтаксис проверок неверен. Рассмотрим

 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',