Question

更新

我要做什么：

我正在开发一个PermissionerMixin，它应该为经过身份验证的用户处理网站权限。例如，如果已登录的用户无权查看网站的特定部分，我将使用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()只是我一开始提到的正确对象的吸气剂。它获取实际数据，然后将其变异存储在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,
};

在此之后，我们有了实际的初始化函数permissionFor(rightName)，它应该具有神奇的作用，并且应该给我一个布尔返回值来处理许可。

现在的一个大问题是，我没有得到布尔值的回报，而是得到了[object Promise]，那是因为我很愚蠢，而且我脑子里没有那个应许的东西。

最后，我只是想将此功能添加到带有

的vue组件中

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

Answer 1

在提交后将返回值拉入自己的语句中。不确定从后端看您的响应对象是什么样子，但是对我个人来说，这看起来更干净，以后可以阅读。检查一下，看看一切如何改变。

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

vue异步函数返回[对象承诺]

1 个答案: