vue async函数返回[对象承诺]。

Question

更新

CodeSandbox

我想做的是

我正在开发一个权限器Mixin，它可以处理一个网站的认证用户的权限。例如，如果一个登录的用户没有权限查看网站的特定部分，我就用 v-if="allowedToSee". 我把整个用户权限对象存储在我的vuex商店里。

数据来自一个 rest api，看起来像这样:

const rights = [
  {
    name: 'findMe1',
    value: false,
  },
  {
    name: 'findMe2',
    value: false,
  },
  {
    name: 'findMe3',
    value: false,
  },
  {
    name: 'findMe4',
    value: false,
  }
]

现在回到我的 mixin 以及我如何从 api 中加载数据:

import axios from 'axios';
export const permissionerMixin = {
  methods: {
    async getRightsFromActiveUser() {
      axios.get(`/not/the/real/path/${this.$store.state.User.activeUser.id}`)
        .then((response) => {
          return this.$store.commit('addActiveUserRights', response.data);
        })
        .catch((error) => {
          console.log(error.response);
        });
    },
    async permissionFor(rightName) {
      const rights = await this.getRightsFromActiveUser();
      for (const right of rights) {
        if (right.name == rightName) {
          return right.value;
        }
      }
    }
  }
}

如你所见，我有两个函数一起工作.getRightsFromActiveUser() 它是一个简单的getter，用于获取我在开始时提到的正确对象，它获取实际的数据，并通过一个突变将其放入vuex存储中。

const state = {
  activeUser: {
    id: 0,
    permissions: {}
  }
};
const getters = {};
const actions = {};
const mutations = {
  addActiveUserId (state, id) {
    state.activeUser.id = id;
  },
  addActiveUserRights (state, rights) {
    state.activeUser.permissions = rights;
  }
};
export default {
  state,
  getters,
  actions,
  mutations,
};

在这之后，我们有实际的init函数 permissionFor(rightName) 这应该能起到作用，并给我一个布尔返回值来处理权限。

现在的一个大问题是，我没有得到一个布尔返回值，而是得到一个 [object Promise]这是因为我很笨，我不明白那个承诺的东西在我的脑子里。

最后，我只是想把这个函数添加到一个vue组件中，并在其上加一个

v-if="permissionFor('whatEver')" 来解决权限处理问题。

Answer 1

在提交后，把返回拉到自己的语句中。不知道你的response对象从后端看是什么样子的，但我个人认为这样看起来更干净，而且能够在以后被读取。检查一下，看看情况如何变化，如果有的话。

import axios from 'axios';
export const permissionerMixin = {
  methods: {
    async getRightsFromActiveUser() {
      try { 
        let returnData = await axios.get(`/not/the/real/path/${this.$store.state.User.activeUser.id}`)
        this.$store.commit('addActiveUserRights', response.data);
        return returnData.data
      } catch (error) {
        console.log(error.response);
      }
    },
    async permissionFor(rightName) {
      try {
        const rights = await this.getRightsFromActiveUser();
        for (const right of rights) {
          if (right.name == rightName) {
            return right.value;
          }
        }
      } catch(error){
        console.log(error.response);
      }
    }
  }
}