检测用户是否已登录单页应用程序的最佳实践是什么？

Question

单页应用程序是一个纯客户端javascript项目，例如webpack，该应用程序的标题始终会显示在右上角：

也就是说，如果用户已经登录，则显示该用户的头像。如果用户尚未登录，请显示登录按钮。

问题是，纯客户端如何才能知道用户是否已登录？

我当前的实现方式是首先显示“登录按钮”，然后页面向服务器发送XHR请求，以尝试获取用户信息。

如果请求成功，则解析用户的头像网址，然后用头像替换“登录按钮”。

如果请求失败，并显示401 http状态码，则客户端知道用户尚未登录，因此请保留“登录按钮”。

但是这里需要注意的是：在大多数情况下，会有许多401请求，匿名用户打开了该页面，这将在控制台中显示红色错误消息。

有人可以在这里分享一些想法吗？

Answer 1

  

“纯客户端如何知道用户是否已登录？”

我在自己的SPA上使用jsonwebtoken。当用户登录时，我将JWT令牌存储在浏览器的本地存储中。

要检查用户是否登录，我检查了存储在浏览器中的令牌的到期日期。如果用户已登录，则将获取请求发送到服务器以获取用户信息。

  

“在大多数情况下，会有401个请求”

我相信您的问题更多与捕获HTTP错误请求有关。如果在客户端检查之后用户未登录，为什么要向服务器发送请求？用您的SPA处理->例如重新路由到登录页面。