使用HTML、Node.js和Express来管理登录状态,使用sessionStorage和localStorage

环境

nodejs : 节点.js
express : 快递
mongoDB : 蒙古数据库

护照,从服务器确认登录状态

app.get('/', (req, res) => {
    res.render('index.ejs', { user: req.user })
})

我们可以使用护照通过服务器来确认登录状态。

 

使用index.js文件使用sessionStorage来管理登录信息。

<% if (user) { %>
<script>
  // Check login data from session storage
  let user_id = `<%- (user.id) %>`;
  let user_name = `<%- (user.user_name) %>`;
  sessionStorage.setItem(
    "info",
    JSON.stringify({ user_name: user_name, user_id: user_id })
  );
</script>
<% } else { %>
<script>
  sessionStorage.removeItem("info");
</script>
<% } %> <%- include('./components/navbar.ejs') %>

如果从服务器获取到用户信息,如果用户信息存在,则将信息保存在sessionStorage中。否则,删除信息。

如果sessionStorage中存在信息,则自定义HTML。

// なるべく上段に置く
// ログイン状態をチェックし、ログインのsessionStorageがあれば、navのmypageの名前を自分の名前に変える
<script>
  var user_info = JSON.parse(sessionStorage.getItem("info"));
  if (user_info) {
    $("#mypage").html(user_info.user_name + "'s' Page");
  }
</script>

请参照以下内容,只需要一种选项:

参考资料

localStorage.setItem('info', data);
localStorage.removeItem('info');
sessionStorage.setItem('info', data);
sessionStorage.removeItem('info');

 

结束

每次从服务器确认登录状态虽然在安全上更加安全,但是确定登录状态确实需要0.1~0.2秒的时间。因此,通过将信息保存在sessionStorage或localStorage中,可以大大减少时间。
在这里,我们设置了在登录后和登出后必须跳转到主页面,所以我们在index.js中管理登录状态。但是,在刚登录后或者刚登出后管理sessionStorage可能更理想。

bannerAds