SPAでログアウトした時にすべき処理って何ですか？

Question

表題の通りなのですが、ユーザーログイン機能があるSPAサイトにおいて、ユーザーがログアウトのリンクをクリックした際に行う処理というのは、クライアント側、サーバー側、それぞれでどんな処理が必要になってきますでしょうか？

前提としては、ユーザーがログインするとサーバー側からJWTトークンが生成され、クライアント側にそれがレスポンスとして送られてきて、クライアント側ではそのトークンをlocal storageに保存しておき、APIリクエストをサーバーに送る度に、そのトークンをリクエストヘッダーに入れてリクエストを送信するといったかたちです。

ログアウト時のクライアント側の処理としては、単純にlocal storageに保存してあるtokenを消去してあげるだけでOKでしょうか？

サーバー側ではログイン・ログアウト周りに関連する処理で何か行う必要はありますか？
SPAではないサイトの場合は、ログアウト時にサーバー側でセッションを破棄する処理が必要ですよね？
SPAの場合は特に不要でしょうか？

Answer 1

ログアウト時のクライアント側の処理としては、単純にlocal storageに保存してあるtokenを消去してあげるだけでOKでしょうか？

厳密なことを言うと、これだけでは足りません。サーバ側のトークンも削除するべきです。
なぜユーザがログアウトするかにはいくつかの動機があると思うのですが、その一つには「他人が自分になりすましてログインしているようだから」というのがありえます。
そうそうありえますって？ わりとありえます。 ごく簡単には、スマホのバックアップを別のスマホに復元されてしまうと、ログインtokenが他の端末に復元されてしまいますよね。

つまり、ログアウトという動作にはtokenをサーバサイドでも無効にするという動作は期待されているわけです。だからサーバにログアウトリクエストを送った上で自分のローカルストレージ消去を行う、という動作が望ましいです。
ログアウトリクエストは失敗したらそれはそれで仕方ないので、打ちっぱなしでいいでしょう。それともセキュリティ的な厳密さのために裏でリトライを繰り返させます？ そこまでこだわってもいいですけど。

Comments

[退会済みユーザー]

御回答ありがとうございます！
サーバー側のトークンも削除ですね！
参考になりました！ありがとうございました！

Answer 2

SPAかどうかは関係ありません。

SPAではないサイトの場合：
前の画面からGET/POSTリクエストを投げる
受け取るファイルはHTMLファイル
ブラウザは前の画面を捨てて新しいHTMLファイルを描画する

SPAの場合：
一度静的なHTMLを読み込む
裏でAjax通信を行い、受け取るファイルはJSONファイル
JavaScriptでよしなにDOMを操作して画面をあるべき姿に更新する

サーバーサイドは返すファイルの形式がHTMLかJSONかの違いしかありませんよね？
要するに挙動自体は全く一緒で何の違いもありません。
SPAであっても無くてもサーバーサイドは全く同じような動作をしてください。