[HTML] nodejs + express でsessionStorage, localStorage を用いてログイン状態を管理

環境

nodejs
express
mongoDB

Passport, サーバーからログイン状態を確認

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

ログイン状態をpassportを用いて、サーバーから確認することができる。

index.jsでログイン情報をsessionStorageで管理

index.ejs

<% 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') %>

サーバーからuserの情報を渡し、userの情報が存在するならば、sessionStorageに情報を保存。
なければ、削除

sessionStorageに情報があるなら、htmlをカスタマイズする。

nav.ejs

// なるべく上段に置く
// ログイン状態をチェックし、ログインの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

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

sesstionStorage

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

終わりに

ログイン状態をサーバーから毎回確認する方が、セキュリティー的に安全であるが、どうしても0.1~0.2秒ほど時間がかかってしまう。
よってsesstionStorageもしくはlocalStorageに情報を保存することによって時間を圧倒的に短縮することができる。
ここではログイン後、ログアウト後に必ずメインページに飛ぶように設定したので、index.jsでログイン状態を管理しているが、ログインした直後、ログアウト直後にsesstionStorageを管理する方が理想的かもしれない。