为什么 auth0 的 parseHash return 未定义？

Question

我是 auth0, when I tried to experiment with auth0's parseHash. It surprised me that somehow this function returns null. I tried to take a peep inside the source code 的新手，看来这个函数最终会尝试 return 一些东西。

这是让我感到困惑的代码部分：

import React from 'react';
import { Link } from '@reach/router';
import './Callback.sass';

export const Callback = ({ auth, navigate }) => {
  let result = auth.parseHash((err, authResult) => {
    if (err) {
      return (
        <div className="error">
          <h1>{err.error}</h1>
          <p>{err.errorDescription}</p>
          <Link to="/">Home</Link>
        </div>
      );
    } else {
      console.log({ authResult });
      return 'profile';
      // localStorage.setItem('authResult', JSON.stringify(authResult));
      // navigate('/profile');
    }
  });
  console.log({ result });
  if (result) return result;
  return <React.Fragment />;
};

结果如下：

我认为这确实令人困惑。控制台记录 'authResult' 部分，但 result 是 undefined。（我什至用 async await 测试过，仍然无法达到我的预期）。

我目前只是包装结果来解决这个问题。

这是一个错误吗？还是我使用方法不正确？

Answer 1

我也是auth0的新手，今天遇到了同样的错误。

通过将 parseHash 包装在 Promise 中来解决：

/* ... */

function handleAuthentication() {
  // wrap parseHash in a Promise
  return new Promise((resolve, reject) => {
    auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        resolve(authResult)
      } else if (err) {
        throw new Error(`Error: ${err.error}. Check the console for further details.`);
      } else {
        throw new Error(`Unknown error`);
      }
    })
  })
}

// wait for the Promise to resolve and log the result
handleAuthentication()
  .then(function(result) {
    console.log(result);
  });

您的代码中的问题是，您期望 parseHash 直接 return 结果，但它没有（在第 22 行）。相反，它会调用回调函数，您已正确注册，因此您会在回调函数内获得预期结果，但不会在回调函数外获得。

Answer 2

你的console.log({ result });

运行在

之前

let result = auth.parseHash((err, authResult) => {

因此将其包装在 Promise 中会有所帮助。

Answer 3

代码没有任何问题...实际上，对于当前示例，您应该总是从安慰 auth.parseHash$() 中得到 "nothing"，实际上，这是一个回调 return 是 Observable<any>。

它的目的是解析 url 散列并提取 Auth 响应，returning 您传入的一些自定义参数（准确地说是散列段）。

因此，如果您不希望 return 编辑您在请求授权时传递的一些哈希参数，auth.parseHash$() 将 return 什么都没有 - link here

为什么 auth0 的 parseHash return 未定义？

Why auth0's parseHash return undefined?

reactjs

auth0

reach-router