Javascript 如何处理React Web应用中的身份验证流？

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

应用程序的右上角有一个按钮，该按钮将被渲染 根据用户的身份验证状态有条件地。如果用户已登录，则 按钮显示“Hi，first name”，用户可以访问该按钮 受保护的路由，否则它只是一个登录按钮

电流： 每次用户访问应用程序时，都会在呈现实际路线之前显示一个微调器，直到Firebase的onAuthChanged（）检测到用户的身份验证状态，这需要几秒钟的时间。 一旦

onAuthChanged（）

传递身份验证状态，应用程序就会根据身份验证状态使用右上角的按钮呈现路线

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

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

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

解决方案的缺点： 但这个按钮实际上并不是唯一位于右上角的按钮，它还伴随着其他三个按钮，这些按钮链接到其他一些公共路线。 所以，它只会闪烁一个按钮，这会使UI变得非常不一致，所以我想我可以闪烁这四个按钮。但这甚至可能会让用户感到恼火，因为整个应用程序在刷新时会快速加载，但上面的4个按钮仍会闪烁几秒钟，并且它无法访问其中任何一个以访问其他公共路线

替代解决方案： 这个解决方案还有第三次也是最后一次迭代，我想在本地存储中缓存身份验证状态，作为一个布尔值签入本地存储，无论它是否登录以及它的名字。现在，在浏览器刷新和重复访问应用程序时，该应用程序将完全看不见

注意事项： 但是，假设用户在其他设备上更改了自己的名字，并且用户访问了此浏览器上的应用程序，则按钮将在本地存储中显示其旧名。要同步该名称，我必须将

onAuthChanged（）

中更新的名称存储在本地存储中，从本地存储中更新到redux，然后将其显示在按钮上。现在，对于用户来说，这似乎是一个bug，也可能会报告，因为旧名称将闪烁几秒钟，直到更新的名称不是来自

onAuthChanged（）

---

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

我认为你的备选方案是最好的选择

即使您的用户在其他设备上更改了名称，但一旦用户登录到web，它将首先从localStorage获取，然后由于onAuthChanged（）的原因，它只会在几秒钟内给出用户的旧名称，然后显示新名称

---

用户不会经常更改名称，偶尔只需几秒钟就可以更新一次名称，这并不是什么大问题。

每次加载页面时调用firebase api确实是个坏主意，使用本地存储设备存储令牌，检查其过期时间快得多。

onAuthChanged（）

本身不是API，更像是身份验证侦听器，这是任何基于Firebase的身份验证的先决条件。如果不使用它，用户的元数据将永远不会在所有设备上同步，因为本地存储中保存了过时的数据。完全同意上述答案。一个小的补充@Vinay，您可以根据需要使用。如果可能的话，使用

用户名->布尔

映射，使用

用户ID->布尔

（或者说任何唯一的字段），以避免

用户名

更改问题。@PrathapReddy的要点很好，这将帮助您避免一些潜在的问题pitfalls@PrathapReddy我不是要为用户名设置布尔检查。我的意思是缓存第一个

auth status

，这将是一个布尔检查，如果用户是否登录，第二个是用户的

name

。缓存

用户id

没有任何意义。因为我想在该按钮中显示用户名，而不是它的

id

。如果我误解了你的评论，请告诉我。@Vinay，我的错。你是对的。放弃映射上建议的第二点。关于

localStorage

vs

sessionStorage

的第一点仍然有效。