ページがリロードされたときにフロントエンドでユーザーのログイン状態が失われる

Question

私は、バックエンドとしてAPIを提供するためにexpress + mongodb + redis + mongooseをバックエンドとして使用します。

そして、フロントエンドにreact + react-router + reduxを使用してください。

認証はsessionId + cookieに基づいています。

フロントエンドの場合は、react-routerとonEnterフックを使用して認証制御します。ユーザーが正常にログインすると、バックエンドのユーザー情報がreduxストアに保存されます。このように：

const auth = { username: 'novaline', isLogin: true}; 

これまでのところすべて問題ありません。

問題は：ユーザーがページをリロードすると、レビュックスストアにキャッシュされたデータが消去されます。ええ、私は知っている、還元店のライフサイクルがあります。

しかし、ユーザーが&にログインすると、ページをリロードすると、認証データがレデックスストアから消去されるため、フロントエンドはユーザー情報を失います。

ユーザー名は未定義で、onEnterフックのため、loginページにリダイレクトされます。

バックエンドの場合、sessionはまだredisです。

私はjwtがこの問題を解決できることを知っています。

私の場合は。ユーザーがページをリロードすると、ユーザーのログイン状態を保持するにはどうすればよいですか？

P.S.私はcookiehttpOnlyとMax-Ageと設定しました。クライアントはcookieを取得または設定できません。

__update：__

私はのlocalStorageにユーザー情報を保存しよう。ユーザがloginedときに、ページをリロードし、真の場合は、ユーザーのlocalStorageで情報かどうかは、私はこのような認証データをリセットする場合、私は確認してください。

const auth = {username: localStorage.getItem('username'), isLogin: true};

だから、私は実装するためにこれを使用することができます自動ログインし、homeページにリダイレクトします。

しかし、私はそれが信頼できないと思います。ユーザーはlocalStorageを変更できます。したがって、ユーザーがlocalStorageをクリアした場合。ユーザー情報とログイン状態も表示されます。

Answer 1

localstorageをログイン情報の保存に使用することは安全ではないため、良い方法ではありません。

1. あなたはあなたのアプリケーションの負荷は、ユーザーがログインを取得したときにそれ以外のAPI呼び出しを作るクッキーがクライアント側で読み取ることを可能にすると、あなたの再来ストアがINITSたときにクッキーから情報をログインフェッチ、

2. どちらかサーバーからのステータス。

2番目の方法をお勧めします。