我怎样才能锁上'在jQuery/Bootstrap/JS的登录屏幕后面的页面

How can I 'lock' a page behind a log-in screen in jQuery/Bootstrap/JS?

本文关键字：JS Bootstrap 屏幕 jQuery 登录更新时间：2023-09-26

我一直在使用谷歌的Firebase作为后端构建一个web应用程序(对于那些不知道的人来说，它是一个实时数据库;数据的任何变化都会立即反映和更新)，因为有其他人在开发Android应用程序，所以没有其他选择(而且它有点酷)。我很惊讶，我还没有写过一行php或任何服务器端代码。无论如何，jQuery在登录和其他东西上工作得很好。

现在我要做一个管理页面(与主用户登录的单独登录)。它将以完全独立的方式访问(通过打开/admin.html之类的东西)。所以登录不能放在一个单独的页面上，这样人们就不会"意外"通过在地址栏中写/admin.html来访问管理面板。

所以我想阻止管理页面完全加载，直到我收到来自Firebase的确认凭证是正确的。所以我怎么能做到这一点知道登录和整个管理页面需要在同一个文件。我肯定这可以通过简单的jQuery + Bootstrap实现，但我不确定如何实现。谁能给我指个正确的方向?提前感谢!

我当然已经在谷歌上搜索过了，但也许我的措辞不对?: P

如果我正确理解你的问题，你的问题是你需要在一个文件中创建两个单独的视图，并根据你的用户"session"重定向到一个或另一个，然而，因为你所有的代码都在客户端，你没有一个"session"系统操作。

好的，你有几个选择。我喜欢使用LocalStorage来存储用户会话的想法。

当请求/admin.html时，您的代码将在LocalStorage中检查有效的会话对象(请记住您需要定义该会话对象)。如果存在有效的对象，则呈现管理区域，如果没有，则呈现登录区域。

当有人向数据库发送username/pass并且您收到一个有效的响应时，您创建一个会话对象，将其存储在LocalStorage中并重新加载页面。

请记住，您需要创建一种机制来使会话死亡和注销视图。

对于即将结束的会话，可以将创建时间和过期时间存储在会话对象中。每次提供"会话保护"页面时，当您检查会话对象是否存在时，您将其过期日期更新为固定数量(例如，20分钟加上当前时间)。

所以，当你检查是否存在一个有效的会话时，你也检查它的过期日期还没有到期，如果是，你删除对象