反応ルータを明示的に制御する方法

Question

ノードを使用して反応アプリケーションを構築し、バックエンドを表現しています。私は認証のためにJWTとパスポートを使用しました。だから私はそれにログインするときに認証トークンを返します。今、バックエンドのエンドポイントはトークンでアクセスすることができました。しかし、ユーザーが他のルート（反応ルート）に移動するのを制限する方法はわかりませんシステムにログインしていません。そして、私は、郵便番号を使ってエンドポイントをテストしました。トークンが現在ブラウザのローカルストレージに保存されていますが、どのようにトークンをAxios Rest Callと一緒に送ることができますか？

Answer 1

見つけた！バックエンドから制御する必要はありません。代わりに、特定の認証をチェックするためにミドルウェアで使用するreeactルーターでonEnter propを使用できます。それが真を返す場合、それはあなたのルートに移動するか、そうでなければ、あなたのデフォルトルートに移動します。コードは以下の通りです。

 function requireAuth(nextState, replace) { 
      if (!auth.loggedIn()) { 
      replace({ 
       pathname: '/login', 
       state: { nextPathname: nextState.location.pathname } 
      }) 
      } 
     } 

     render((
      <Router history={withExampleBasename(browserHistory, __dirname)}> 
       <Route path="login" component={Login} /> 
       <Route path="dashboard" component={Dashboard} onEnter={requireAuth}/> 
      </Router> 
     ), document.getElementById('example'))