我要做的是:

我正在做一个许可的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 and以及我如何从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]，这是因为我很笨，我脑子里没有那个Promise的东西。

最后，我只想用一个

v-if=“permissionfor('what ever')”来解决权限处理问题。