4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsのSPAでログインセッション切れの後、ログインをして、元の画面に戻す方法

Last updated at Posted at 2020-09-03

課題

ログイン後の画面をSPAで作成しています。
ログインセッションが切れた場合、ログインからやり直します。
ログイン完了後は、元の画面に戻したい。

SPAは、ブラウザで動作しているので、ブラウザ側でなんとかしたい

回答

SessionStorageを利用する。

(重要)SessionStorageはタブ/ウィンドウごとにある。

  1. ログインセッション切れを検知
  2. sessionStorageに、現在のURLをログイン後の遷移先として保存する
  3. ログイン画面に遷移
  4. ログイン成功後、SessionStorageを参照して、遷移先の画面が指定されていれば、読み出し後削除して、その画面に遷移する。なければデフォルトの画面に遷移する。

参考文献

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?