问题描述

我想讨论一下我在 React Web 应用程序中的身份验证流程中遵循的范例，并且需要您的建议/建议。

该应用程序在右上角有一个按钮，该按钮根据用户的身份验证状态有条件地呈现。如果用户登录，按钮会显示Hi, first name on click 用户可以访问受保护的路由，否则它只是一个登录按钮。

电流：

每次用户访问应用程序时，都会在渲染实际路线之前显示一个微调器，直到Firebase 的 onAuthChanged()检测到用户的身份验证状态，这需要几秒钟。一旦onAuthChanged()传达了身份验证状态，应用程序会根据身份验证状态使用右上角的按钮呈现路线。

当前流程的问题：

上面提到的流程对用户来说并不是一种无缝的体验。因为每次用户再次访问应用程序甚至刷新其浏览器时，它都必须等待那个烦人的微调器消失。这是一个相当糟糕的用户体验。

无论身份验证状态如何，大多数应用程序都可以进行交互，因此即使它是公共路线，在整个应用程序中显示微调器也没有意义，因为需要知道身份验证状态才能有条件地呈现该按钮。此流程使应用程序完全无法使用，直到 Firebase 未检测到身份验证状态。另外，由于所有路由都是延迟加载的，它增加了用户第一次访问应用程序的时间，第一个微调器显示为延迟加载路由的后备，第二个显示为身份验证状态。

电流解决方案：

我已经想到了一个可以帮助我解决上述问题的解决方案。我现在想的是使该按钮闪烁，直到Firebase检测到身份验证状态。这似乎是一个非常简洁的解决方案，因为现在用户可以在按钮闪烁的同时交互和浏览应用程序。

解决方案的缺点：

但这个按钮其实并不孤单在右上角，还伴随着另外三个按钮，链接到其他一些公共路线。因此，只闪烁一个按钮会使 UI 变得非常不一致，所以我认为我可以闪烁所有四个按钮。但这对用户来说甚至可能看起来很烦人，因为整个应用程序在刷新时会快速加载，但上面的 4 个按钮仍然闪烁几秒钟，并且它无法访问其中任何一个来访问其他公共路线。

替代解决方案：

该解决方案有第三次也是最后一次迭代，我正在考虑将身份验证状态缓存为本地存储中的布尔检查，无论它是否已登录以及它的名字。现在，该应用程序在浏览器刷新和重复应用程序访问方面将完全没有问题。

注意事项：

但是，假设用户在其他设备上更改了他的名字并且用户在此浏览器上访问应用程序，按钮将显示它的旧名称缓存在本地存储中。要同步名称，我必须将更新后的名称onAuthChanged()存储在本地存储中，从本地存储更新到redux，然后将其显示在按钮上。现在，这对用户来说似乎是一个错误，并且可能也会报告，因为旧名称会闪烁几秒钟，直到更新的名称不是来自onAuthChanged()

结论：我想知道您的观点，或者您是否有比上述更好的流程。谢谢！:)

标签： javascriptreactjsfirebasereduxreact-redux

javascript - 如何处理 React Web App 中的身份验证流程？