Question

我创建了一个插件，可以让我检查用户是否有权执行某些操作。插件使用axios检查服务器上的权限并返回true或false。

但是我有一个问题，因为“ if”语句不必等待函数“ $ guard（）”完成。结果，我得到的信息是“ Promise {：“ pending”}“而不是布尔值。

publicGame()
{
                console.log(this.$guard('Moderate games'));
                if(this.$guard('Moderate games') === true){
                    console.log('can')
                }else{
                    console.log('can not')
                }
}

插件：

export default {
    Auth,
    install (Vue, options) {
        Vue.prototype.$guard = async function(permission){
           await axios.post('/permission',{permission: permission},{ headers: {
                'X-Requested-With': 'XMLHttpRequest',
                "X-CSRF-TOKEN": Auth.state.token
            }}).then(response=>{                
                return response.data.access === 1;
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
}

那么如何解决此功能以等待ajax请求完成？

谢谢。

Answer 1

使publicGame异步：

async publicGame()

在await函数上使用this.$guard：

const valid = await this.$guard('Moderate games')

然后在valid上使用if语句：

if (valid) {
   //now it works.
}

您忽略了代码中的承诺，但是我们在这里使用async/await模式。

Answer 2

您必须在$guard动作响应中处理所需的行为。您可以添加其他字段options并执行它们，例如

export default {
    Auth,
    install (Vue, options) {
        Vue.prototype.$guard = async function(permission, options){
           await axios.post('/permission',{permission: permission},{ headers: {
                'X-Requested-With': 'XMLHttpRequest',
                "X-CSRF-TOKEN": Auth.state.token
            }}).then(response=>{                
                if (options.on_success != undefined) {
                   options.on_success(response.data.access === 1);
                }
            }).catch(function (error) {
                if (options.on_error != undefined) {
                   options.on_error(error);
                }
            });
        }
    }
}

然后，当您调用$guard函数时，您将定义要执行的操作on_success和on_error

publicGame()
{
                this.$guard('Moderate games', {
                  on_success: function(can) {
                    if(can){
                      console.log('can');
                    } else {
                      console.log('can not');
                    }
                  },
                  on_error: function(error) {
                    console.log("Error: ", error);
                  }
                })
}

如何等待直到变量可用？

2 个答案: