使用 React HashRouter 时 Okta 重定向失败

如何解决使用 React HashRouter 时 Okta 重定向失败

我的应用程序现在正在使用 HashRouters 我想集成 OKTA 身份验证，但问题是 Okta 不允许在重定向 URL 中添加 #。结果登录成功后，我登陆了一个404未知页面。我不想更改浏览器路由器

有人可以建议我如何使用 OKta 重定向来处理 #Routes 吗？

如果可以，请举个例子吗？

解决方法

第 1 步：首先检查您的 Web 服务器，并对其进行配置，以便对于任何 URL（例如来自 Okta 的返回 URL），它仍会返回网站（或 Web 应用程序，无论您正在构建什么），否则它会在根路径。因此，假设对于路径 /，服务器响应 index.html 文件（或您拥有的任何初始文档），它必须在所有不转到静态资源的路径上响应完全相同的内容（例如 .js、.css 或图像文件）或其他需要单独处理的路由（即任何 API 路由）。通常这称为 catch-all 路由，应该对其进行配置，并且是许多服务器环境中的常见做法（尽管并非全部）。

或者，您也可以在您的服务器上定义一个特定的路由，该路由将仅捕获 Okta 重定向 URL 并为客户端提供响应。

这将确保加载客户端应用程序，从而初步解决您的 404 问题。客户端对此无能为力（因为首先需要从服务器检索它），具体如何操作取决于您的 Web 服务器环境/配置，因此很遗憾我无法提供这里的任何例子。只需在您的服务器上查找路由部分并确保其配置正确。

第 2 步：从客户端，您可以使用 global window.location 接口获取 Okta 重定向到的 pathname，并在应用加载时对其进行处理（例如将用户重定向到他们的个人资料）页面，或您在登录时需要执行的任何操作）。您甚至可以将页面重定向到它的哈希版本，如下所示：

let pathname = window.location.pathname; // note that pathname always starts with '/'

// If pathname.length is 1,it's just '/' so we're already on root;
// This check also prevents infinite redirect loops
if (pathname.length > 1) {
    window.location = '/#' + pathname.substr(1); // substr strips the leading '/' off the pathname
}

上面的代码会将任何 URL（例如 /loggedIn/user/...）重定向到其哈希版本（例如 /#loggedIn/user/...），这将与您期望的 HashRouter 一起使用。