Vue和Vuex无法在html中检索适当的值

Jason 发表于 Dev

杰森

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

这是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，因此我应该看到此菜单项，但未显示。

贝耶斯

正如有人在注释中指出的那样，它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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。