ReactJS：localstorageのトークンが期限切れになっているかどうかを常時チェックする方法

Question

ReactJSでは、localstorageに保存されたトークンの期限が切れているかどうかを常時チェックする方法はありますか？有効期限が切れている場合は、トークンを削除します。

は以下に出会いましたが、ページを再読み込みますときにのみトリガーされません？：

window.onbeforeunload = function() { 
    //remove token 
    return ''; 
} 

Answer 1

とにかくセキュリティ関連のユースケースのためにユーザーのマシン上で実行されているコードを使用することはできませんので、理由をチェックしませんトークンは使用時にのみ使用できますか？

ローカルストレージからトークンをロードして、それを使用している可能性があります。セッションを認証します。それを使用する前にまず有効性をチェックしてみてください。

これにより、トークンをチェックし、関連する機能をバンドルし、コードの複雑さを軽減するような進行中のアクティビティを実行する手間を省くことができます。

結局のところ、トークンは使用されずにブラウザのストレージに格納されるだけで害はありません。

Answer 2

以下はreduxを使用していると仮定しています。トークンが期限切れになったときにアクションをトリガーするミドルウェアを作成できます。これにより、リデューサーダウンストリームを処理できます。 Reduxのアプローチは主に、Reduxが現在Reactで使用されている最も一般的な状態管理ソリューションであるためです。あなたがCREATESTOREを行う際

// export the action type used as a const, so it can be imported for 
// the reducer to listen for... The export const/key is more convenient 
// then you can use a more namespaced string value to help prevent collisions 
export const TOKEN_EXPIRED = 'tokenExpiredMiddleware_TokenExpired'; 

// redux middleware pattern (store) => (next) => (action) => result; 
export default function expiredTokenMiddleware(store) { 
    // here we only care about a handle to the store for store.dispatch 
    // start checking every 15 seconds, probably want this configurable 
    setInterval(checkToken.bind(null, store), 15000); 

    // return a pass-through for the plugin, so other plugins work 
    return (next) => (action) => next(action); 
} 

// export checkToken for testing... etc 
// should probably be a separate module 
export function checkToken(store) { 
    var tokenId = ''; // TODO: Identify token 
    var isExpired = true; // TODO: replace with function to get current state 
    if (isExpired) { 
    store.dispatch({ 
     type: TOKEN_EXPIRED, 
     payload: { tokenId }, 
    }); 
    } 
}; 

次に、あなただけの適切な処置を放出するこのミドルウェアを追加することができ、そして、あなたの適切な減速でそれを扱うことができます...私は、ウィンドウのリサイズ/スクロールのために類似した何かをします私のサイズ/位置が常に設定されるようにイベントを設定します。あなたが使用しているので、これは、ES6 +構文を使用している

は、私はそれが公正な仮定