認証ルートは、私は、次のスタックを使用しています

Question

を反応させ、PassportJS PassportJSベースのログイン認証と登録認証が正常にセットアップされました。私のアプリのすべてのページは保護されたルートです - ログインしているユーザーだけが見ることができます。

私の質問は、各ルートについて、ユーザーが現在ログインしているかどうかを確認する方法です。私はエクスプレスセッションはサーバー側のセッション管理を提供することを理解していますが、現在のユーザーのセッションが存在するかどうかを確認するために、各ページのロード時にバックエンドにAPIリクエストを行うことを回避する方法があるのだろうかと思います。

マイApp.jsファイル：

import React, { Component } from 'react'; 
import './App.css'; 
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom'; 
import AsyncAuthPage from 'components/AsyncAuthPage/index.js' 

const NoMatch =() => (
    <p>Path not found</p> 
); 

const HomePage =() => (
    <div>WELCOME!</div> 
); 


class App extends Component { 
    render() { 
    return (
     <div className="App "> 
     <BrowserRouter> 
     <Switch> 
      <Route path="/login" component = {AsyncAuthPage} /> 
      <Route path="/home" component = {HomePage} /> 
      <Route path="*" component={NoMatch} />   
     </Switch> 
     </BrowserRouter> 
     </div> 
    ); 
    } 
} 

export default App; 

AsyncAuthPageコンポーネントが実装するPassportJSベースの認証。上記のサンプルでは、​​ホームページルートを認証で保護したいと思います。これはどうすればできますか？ユーザーが正常にログインした後、次のように世話をする必要があります

• App.jsは、そのログインを知っている必要がある親は
• 成功したすべてのページはのAPI呼び出しを避けるようにしてください現在のユーザーがログインしているかどうかを確認するために、可能な限り（ componentDidMountまたはページのロードの）バックエンド、。
• はページで動作するはずですsuccessifulログイン後のlocalStorageであまりに

Answer 1

ストアの資格情報を再ロード、アプリの負荷資格あなたの州で始まります/ redux、あなたのAPIからエラー401（権限のない）が得られたら、必要に応じて認証情報を無効にしてください。