NextJS - 在 getServerSideProps 中获取 url答案

【问题标题】：NextJS - get url in getServerSidePropsNextJS - 在 getServerSideProps 中获取 url
【发布时间】：2020-07-25 15:22:02
【问题描述】：

我正在使用 nextJS，但我很难从重定向中获取完整的 URL。

我正在从 Twitch 执行 oauth 流程，在进行身份验证后，Twitch 会在 http://localhost:3000/auth/twitch/ 之类的 URL 上重定向回我的 Next 应用程序 - 它们在该重定向 URL 上包含大量额外数据，例如 http://localhost:3000/auth/twitch/callback#access_token=4kfdiopdsjendc539c9234&scope=user_read&token_type=bearer

/pages/auth/callback.js

export async function getServerSideProps(context) {
  console.log(context);
  return {
    props: {},
  };
}

我正在尝试从重定向中获取查询参数（例如 access_token），但由于 Twitch 使用 # 将其附加到我的重定向 url，context 内部似乎没有检测到它。

我知道如果我手动将浏览器中的 # 更改为 ? 然后 context.query 有效。问题是，我无法规定 Twitch 如何将他们的数据攻击到 URL。

如何访问查询参数？

【问题讨论】：

标签： next.js twitch

【解决方案1】：

这是 Twitch（和许多其他 OAuth 提供商）提供的安全功能。来自docs：

访问令牌位于 URL 片段中，而不是查询字符串中，因此它不会显示在对您服务器的 HTTP 请求中。可以使用 document.location.hash 从 JavaScript 访问 URI 片段。

正如它所说，URL 片段不会发送到服务器，因此无法从getServerSideProps 访问。相反，您可以使用客户端回调之一，例如 useEffect 或 componentDidMount。

更多关于discussion here

【讨论】：