Vue & Vuex не извлекает правильное значение в html


Vue & Vuex не извлекает правильное значение в html

12.10.2020 05:44:08 Просмотров 3 Источник

У меня есть навигационная панель, где я показываю только определенные пункты меню, основанные на роли пользователя.

Вот HTML (я удалил все пункты меню, кроме одного, чтобы упростить):

<v-speed-dial class="speed-dial-container contextual-text-menu" v-if="user && user.emailVerified" fixed top right
  direction="bottom" transition="slide-y-transition">
  
<v-icon v-if="checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true" class="mt-2"
    @click="sendComponent({ component: 'Dashboard' })">$admin</v-icon>
  
</v-speed-dial>

Мой метод:

async checkAuthorization(permissions) {
  if (permissions.length > 0) {
    const temp = await this.$store.dispatch('UserData/isAuthorized', permissions)
    return temp
  }
},

Магазин Vuex:

isAuthorized({
  state
}, permissions) {
  const userRoles = state.roles
  if (permissions && userRoles) {
    const found = userRoles.some(r => permissions.includes(r))
    return found
  }
},

Все мои консольные журналы показывают правильные значения, но HTML-код не отвечает соответствующим образом.

Пример: в этой строке кода checkAuthorization(['superAdmin', 'admin', 'pastor', 'member']) === true я добавил "член" и вошел в систему как пользователь, у которого есть только роль "член". При просмотре журналов консоли все возвращает true, поэтому я должен увидеть этот пункт меню, но он не отображается.

У вопроса есть решение - Посмотреть?

Ответы - Vue &amp; Vuex не извлекает правильное значение в html / Vue & Vuex not retrieving proper value in html

Bahadır Birsöz

12.10.2020 06:04:06

То, что я обычно делаю :

Я добавляю еще одно пользовательское состояние как Unknown и делаю его состоянием по умолчанию.

В основном main.js (или main.ts) я вызываю state.initialize(), который определяет состояние пользователя.

И самое главное-использовать навигационные охранники. Вместо проверки охранников маршрутизации на router-link (или url-адресе, или где-либо еще на этом шаге) вы должны определить его в маршрутизаторе. Существует функция router.beforeEach, которую вы можете использовать, чтобы проверить, имеет ли пользователь право использовать этот маршрут, и перенаправить пользователя на страницу 401, если у пользователя нет разрешения.

https://router.vuejs.org/guide/advanced/navigation-guards.html

Является ответом!
Beyers

12.10.2020 06:18:45

Как кто-то указал в комментариях, checkAuthorization является асинхронной функцией и возвращает обещание, поэтому вы не можете проверить наличие promise === true.

Кроме того, я бы изменил isAuthorized на геттер vuex, а не на действие, например

getters: {
  // ...
  isAuthorized: (state) => (permissions) => {
    if (permissions && state.roles) {
      return state.roles.some(r => permissions.includes(r))
    }
    return false;
  }
}

И обновите checkAuthorization, чтобы не возвращать обещание, например

function checkAuthorization(permissions) {
  if (permissions.length > 0) {
    return this.$store.getters.isAuthorized(permissions);
  }
  return false;
}
Помочь в развитии проекта:
Закрыть X