トークンの期限切れを確認してユーザーをログアウトするにはどうすればよいですか？

Question

ユーザーはログアウトボタンをクリックすると自分自身でログアウトすることができますが、トークンが期限切れになった場合、アプリケーションではサーバーサイドとフロントエンドの両方でトークンが使用されるためログアウトできません。ユーザがログアウトボタンをクリックすると、トークンが有効であればサーバとブラウザの両方のトークンがクリアされます。ユーザーがログアウトせずにトークンの有効期限が切れても、ブラウザで消去されていない可能性があります。このような状況に対処するには、ユーザーが自分のアプリを訪れるたびにトークンの期限切れをチェックするにはどうすればよいですか？トークンが期限切れになっている場合は、ブラウザからトークンをクリアしますか？

ユーザーがページを更新したり、別のページに切り替えるたびに、バックグラウンドで監視することを試みました。私はこれが効率的な方法だとは思わない。私はミドルウェアが機能していると思います。

function* loadInitialActions() { 
    var dateNow = new Date(); 
    console.log(jwtDecode(token).exp < dateNow.getTime() - jwtDecode(token).iat); 
    const token = 
    JSON.parse(localStorage.getItem("user")) && 
    JSON.parse(localStorage.getItem("user"))["token"]; 
    if (
    token && 
    jwtDecode(token).exp < dateNow.getTime() - jwtDecode(token).iat 
) { 
    yield put(LOGOUT_SUCCESS); 
    } 
} 

function* initialize() { 
    const watcher = yield fork(loadInitialActions); 
    yield take([INITIALIZE_ERROR, INITIALIZE_SUCCESS]); 
    yield cancel(watcher); 
} 

function* rootSaga() { 
    console.log("rootSaga"); 
    yield takeLatest(INITIALIZE, initialize); 
} 

だから私の質問は、トークンは、ミドルウェアから有効期限が切れている場合、私はトークンの有効期限ロジックとログアウトユーザーを使用しない方法ですか？

Answer 1

私の見解では、ミドルウェアが最適です。あなたはその後、applyMiddleware

Answer 2

メインコンポーネントをHOCでラップする必要があります。 HOCはトークンを検証し、OKを指定するとコンポーネントが表示されます。トークンが無効な場合、ログインページはにリダイレクトされます。

const authChecker = (Component) => { 
    return class extends React.Component { 
    state = { 
     show: false; 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.children !== this.props.children) { 
     this.checkAuth(); 
     } 
    } 

    componentDidMount() { 
     this.checkAuth(); 
    } 

    checkAuth() { 
     Api.checkAuth() 
     .then(result => { 
     if (result.success) { 
      this.setState({ show: true }); 
     } else { 
      // logout since token expired 
      API.logout(); 
     } 
     }); 
    } 

    render() { 
     return this.state.show && <Component {...this.props} /> 
    } 
    } 
} 

export default authChecker(Main);