时间戳

首页 > 解决方案 > Vue & Vuex 没有在 html 中检索到正确的值

javascript - Vue & Vuex 没有在 html 中检索到正确的值

问题描述

我有一个导航栏，我只根据用户的角色显示某些菜单项。

这是 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，所以我应该看到这个菜单项，但它没有显示。

标签： javascriptvue.jsvuejs2vue-componentvuex

解决方案

正如有人在评论中指出的那样，checkAuthorization它是一个异步函数，将返回一个 Promise，因此您无法检查promise === true.

除此之外，我会变成isAuthorized一个 vuex getter 而不是一个动作，例如

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;
}

推荐阅读