时间戳

首页 > 解决方案 > Okta 重定向因 React HashRouter 而失败

reactjs - Okta 重定向因 React HashRouter 而失败

问题描述

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

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

如果可能的话，你能提供一个例子吗？

标签： reactjsokta

解决方案

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

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

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

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

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您期望的一样。

推荐阅读