使用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可能更理想。