我如何在单个项目中使用两个React应用程序

Question

在我的项目中，我创建了两个不同的 React 应用程序，假设 app1 在 http://localhost:3000 上运行用于网络和登录，app2 在 http://localhost:3001 上运行用于服务。现在登录 app1 后，我想使用访问和刷新令牌重定向到 app2(http//:localhost:3001)。顺便说一句，后端是 Django。

我尝试使用 localStorage，这对于两个应用程序来说都是不同的。

Answer 1

在 React 应用程序中有不同的方法可以做到这一点。首先，您必须将它们视为不同的应用程序，因为它们位于不同的客户端实例中。您可以简单地创建一个像

redirectToApp2WithToken

这样的函数，并根据需要对下面的代码进行一些其他修改。您必须在

app1

中执行此操作才能重定向到您的

app2

。

const search = {
   token: yourToken,
   ... // All the other token related props 
};
  
const redirectApp2 = `http//:localhost:3001/redirect? 
${queryString.stringify(search, { arrayFormat: 'repeat' })}`;

window.location.replace(redirectApp2);

顺便说一句，

queryString

是一个 npm 库，您可以在这些类型的查询字符串相关内容中使用它。你可以这样安装。

import queryString from 'qs';

配置完

app1

后，您可能需要转到

app2

并创建另一条名为

/redirect

的路线。在该重定向页面中，您必须实现一个逻辑来验证和存储来自查询参数的令牌。然后你必须重定向到正确的路线，例如

home

或

dashboard

。此外，如果需要，您可以使用

localStorage 

来保留令牌。这不会是一个大问题，但您必须确保始终拥有刷新的令牌。