vue.js - AWS Cognito UI 在调用回调页面时使用哈希来包含参数

Question

我在使用 AWS Cognito 提供的 UI 时遇到问题。

当我尝试使用提供的 UI 时，我使用填充的 URL 调用端点：

https://mydomain.auth.ap-northeast-1.amazoncognito.com/login?response_type=token&client_id=123456789&redirect_uri=http://localhost:3000/callback/

现在的问题是，在身份验证之后，Cognito 使用 # 来发回所需的参数。结果将如下所示：

http://localhost:3000/callback/#id_token=eyJragIsm2PqVpw&access_token=eyJraWQiOiJ&expires_in=3600&token_type=Bearer

我很难在回调页面（这是一个 vue 应用程序）中阅读 id_token 和 access_token 。

如何将 Cognito 配置为使用通常的问号 (?) 来传递查询字符串，或者，如何在哈希 (#) 之后读取传递的参数。

我很欣赏你对此的建议。

Answer 1

如果您使用的是 Vue.js 路由器，实际上处理哈希部分非常容易。只需将此代码段放在组件中的某个位置即可。参考：https ://router.vuejs.org/api/#the-route-object

let cognitoData = {}
if (this.$route.hash !== "") {
    let elementsString = decodeURIComponent(
        this.$route.hash.substr(1, this.$route.hash.length)
    );
    let params = elementsString.split("&");
    for (let param of params) {
        let values = param.split("=");
        cognitoData[values[0]] = values[1];
    }
}

// do your business with cognitoData