Vue.js中使用AWS Cognito用户认证的回调数据返回问题

在Vue.js中使用JavaScript实现AWS Cognito用户认证时，loginUser函数无法返回cognito.initiateAuth回调中的tokenData。控制台能正常打印tokenData，但尝试Promise、async/await等方法后，返回值仍为null，无法在Vue应用中使用该数据。

原代码如下：

async loginUser(username, password) {
        AWS.config.update({region : region});

        const payload = {
            AuthFlow: "USER_PASSWORD_AUTH",
            ClientId: clientId,
            AuthParameters : {
                USERNAME: username,
                PASSWORD: password
            }
        }
    
        var cognito = new AWS.CognitoIdentityServiceProvider();
        return cognito.initiateAuth(payload, function(err,data) {
            if (err) {
                alert("Error: " + err);
                return null;
            }
            else {
                tokenData = data["AuthenticationResult"];
                console.log(tokenData);
                return tokenData;
            }
        })
    }

解决方法 #

问题核心在于：cognito.initiateAuth的回调函数内部的return无法作为外层loginUser函数的返回值，且直接返回initiateAuth方法的调用结果并非回调里的tokenData。AWS SDK支持将异步方法Promise化，配合async/await就能正确返回数据。

修正后的代码：

async loginUser(username, password) {
    AWS.config.update({ region: region });

    const payload = {
        AuthFlow: "USER_PASSWORD_AUTH",
        ClientId: clientId,
        AuthParameters: {
            USERNAME: username,
            PASSWORD: password
        }
    };

    const cognito = new AWS.CognitoIdentityServiceProvider();
    try {
        // 用.promise()将回调模式转为Promise，配合await等待结果
        const data = await cognito.initiateAuth(payload).promise();
        const tokenData = data.AuthenticationResult;
        console.log(tokenData);
        return tokenData;
    } catch (err) {
        alert("Error: " + err);
        return null;
    }
}

关键改动说明 #

• 移除回调函数，改用.promise()方法将initiateAuth转换为Promise对象
• 使用try/catch捕获认证错误，替代原回调中的err处理逻辑
• 通过await等待异步操作完成，直接获取返回数据并解析出tokenData返回

修改后，调用loginUser时用const token = await loginUser(username, password)就能正确拿到tokenData。

内容的提问来源于stack exchange，提问作者NicolaiDige