Vue & Vuex 没有在 html 中检索到正确的值答案

【问题标题】：Vue & Vuex not retrieving proper value in htmlVue & Vuex 没有在 html 中检索到正确的值
【发布时间】：2021-01-26 21:32:35
【问题描述】：

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

这是 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。
如果我删除异步，我会在控制台中得到 [object Promise]
我删除了异步并在控制台中得到了这个Promise {<pending>} __proto__: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: true
问题是你不能像那样绑定异步函数（并且 Vuex 调度函数是异步的）所以你必须创建另一个变量，例如role 然后在调度函数解析后设置此变量，并以 created/mounted 钩子之类的方式调用 checkAuthorization。
@User28 我认为这行得通。把它放在一个答案中，我会接受它。

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

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

【讨论】：

我在测试您的方法时遇到了困难。我的吸气剂是 const getters = { 而不是 getters: {

【解决方案2】：

我通常做什么：

我将另一个用户状态添加为Unknown，并将其设为默认状态。

在main main.js（或main.ts）中我调用state.initialize()，它决定了用户的状态。

而且，关键是使用导航守卫。而不是检查 router-link （或 url 或此步骤中的任何位置）上的路由保护，您应该在路由器中定义它。有一个router.beforeEach函数可以使用，这样你就可以检查用户是否被授权使用该路由，如果用户没有权限，则将用户重定向到401页面。

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

【讨论】：

感谢您的回答，但是，我确实使用路由守卫。在这种情况下，我需要根据用户的角色显示或隐藏菜单项。除此之外，我还有一个路由守卫，如果他们没有授权，它不会让用户去路由。我的目标是如果未经授权，甚至不显示菜单项