同ブラウザ、別タブでそれぞれセッション管理がしたい

Question

実現したいこと

Gmailのように、複数アカウントを持っていて、
アカウントAでログインした後に、画面右上のアカウント選択で別のアカウント（アカウントB）を選択すると別タブでアカウントBのGmail画面が表示され、本タブでログインしたアカウントAと別タブでログインしたアカウントB、
両方とも操作できるようになると思います。

このようなセッション管理の仕組みが知りたいです。技術的にどのような知識が必要でしょうか？

想定しているWEBアプリケーションの構成は、
javascriptのFWはvue.jsでSPA。
サーバサイドはサーバレス（AWS Lambda Java）のインフラアーキテクチャとなります。

ざっくりとした質問で恐縮ですが、詳しい方、ご教示頂けますと幸いです。
何卒宜しくお願致します。

Answer 1

Googleの方式は、複数のログインを同時に管理しつつ、URLでどのセッションかを区別しているのだと思います。
Gmailを例に取ると、以下のように、/u/の後の数字がセッション番号になります。

https://mail.google.com/mail/u/0/
https://mail.google.com/mail/u/1/

技術的にはそんなに難しいものではないでしょう。考えても分からなければ追加の質問としてあげてください。
別解としては、セッション情報をsessionStorageに保存すれば、自然にタブごとになります。しかし、この方式だと、新しいタブを開いた際にはログアウトされた状態から始まるので、Googleと同じような挙動にはなりません。

Comments

[jirokawabata]

早速の回答ありがとうございます。
sessionStorageの方検討していきたいと思います。

ログインアカウントによって、
アカウントAのログインしているタブAは1日中セッション保持して、
アカウントBのログインしているタブBは30分保持するということは可能ですかね。

vue.jsのライブラリ使用して、
タブAにログインしたときにsessionStorageにログイン情報とタイマーをセット。
タブBでログイン画面を開いて、アカウントBでログインしてsessionStorageにログイン情報とタイマーをセット。

みたいなことをすれば実現はできそうでしょうか。

[ockeghem]

> タブAにログインしたときにsessionStorageにログイン情報とタイマーをセット。
この方法だと、利用者からタイマー（セッション終了時刻）を改変されるリスクがあります。JWTのようにexpire時刻をトークンに入れて、署名するような方法はありますが、難易度は上がります。セッションIDをsessionStorageに保存してサーバー側でタイマー処理する方が簡単だと思います。