在反应中处理多个帐户

Posted 2023-02-22

【中文标题】在反应中处理多个帐户

【英文标题】：Handle multiple accounts in react

【发布时间】：2021-12-18 07:55:51

【问题描述】：

我正在开发一个 react JS 网络应用程序，它允许用户一次登录多个帐户。这将类似于 Google 允许您使用多个帐户登录的方式。

我的问题是跟踪每个标签中使用的用户的最佳方式是什么？如果用户单击带有“在新标签页中打开”的链接，我将如何确保正在使用的当前帐户被传递到新标签页？

【问题讨论】：

你不能只使用会话存储吗？

我正在查看，但问题是我需要在使用链接时从一个页面传递到另一个页面的内容，但如果打开新选项卡则不存在。我不认为会话存储可以做到这一点。

【参考方案1】：

查看 google 如何在链接中包含用户 - u/0、u/1、u/2。这可能会让你走上正确的道路。我会这样做，然后从 URL 中获取该参数，然后根据需要使用会话存储或 cookie。

---

评论讨论后编辑

我为您创建了一个代码沙箱，以了解如何使用 react-router-dom 实现这一目标。

https://codesandbox.io/s/small-platform-jlwpg

浏览一下，一些值得注意的项目是：

使用userId 参数嵌套路由器：

<Routes>
  <Route exact path="/" element=<Home /> />
  <Route path="/about" element=<About /> />
  <Route exact path="/mail" element=<Mail />>
    <Route path=":userId" element=<Mailbox /> />
  </Route>
</Routes>

<Outlet/> 在Mail.jsx 中的使用。没有这个，Mail 将不会呈现该子路由。

Mailbox.jsx中useParams钩子的使用

const  userId  = useParams();

【讨论】：

我看到了，并且还在考虑可以将 /:ID/ 作为我所有路线的根。但不确定这是否是最好的方法。

是的，google auth 系统非常复杂，但是在玩了足够多的 firebase auth 之后，我相信它或多或少都在遵循这个原则

到目前为止，我找不到任何建议如何创建“/:id/”根路由和所有其余路由作为子路由的信息。反应路由器甚至会这样做吗？知道去哪里看吗？

我已经使用代码沙箱更新了答案，以帮助您使用子路由设置 react-router-dom。

查看了您的沙箱，但它似乎没有解决 ID 下面的子路由。例如，在 Google Drive 上，您可能会看到“drive.google.com/u/1/folder/filename”。我能够弄清楚如何将 ID 作为最终项目，但我似乎无法弄清楚该 ID 包含在其下方的其他路线的路线中。