が正常にユーザーサインイン

Question

私が反応し、角度から移行し、シンプルなJWTは、フラックスは、ルートV4でアプリを反応させ、認証を実装しようとしているため初心者午前たときにルータがV4認証されたルートにリダイレクト反応します。 Rails APIへのリクエストを正常に送信し、JWTトークンを取得しました。これで、LoginActionの認証されたRouteコンポーネントにアプリケーションをリダイレクトするプログラム的に論理的な方法が見つかりませんでした。私はAuthenticatedAppコンポーネントにページをリダイレクトする有効なトークンとAPIへのリクエストが成功した後、私のLoginActionので

index.js

import React from 'react'; 
import ReactDOM from 'react-dom' 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
import {createBrowserHistory} from 'history'; 
import Layout from './components/Layout'; 
import Login from './components/Login'; 
import Signup from './components/Signup'; 
import registerServiceWorker from './registerServiceWorker'; 
import AuthenticatedApp from './components/AuthenticatedApp'; 

const app = document.getElementById('root'); 


ReactDOM.render(
    <Router history={createBrowserHistory}> 
     <div> 
      <Route exact path="/" component={Layout} /> 
      <Route path="/login" component={Login} /> 
      <Route path="/signup" component={Signup} /> 
      <Route path="/record" component={AuthenticatedApp} /> 
     </div> 
    </Router>, 
app); 

registerServiceWorker(); 

LoginAction.js

。しかし、ルート4のバージョンはインターネットでのサポートがほとんどありません。

import AppDispatcher from '../dispatchers/AppDispatcher.js'; 
import LOGIN_USER from '../constants/LoginConstants'; 
import LOGOUT_USER from '../constants/LoginConstants'; 
import RouterContainer from '../services/RouterContainer' 

export default { 
    loginUser: (jwt) => { 
    var savedJwt = localStorage.getItem('jwt'); 

     AppDispatcher.dispatch({ 
      actionType:LOGIN_USER, 
      jwt: jwt 
     }); 
     if (savedJwt !== jwt) { 

      {want to redirect to '/record' of AuthenticatedAPP component} 

      localStorage.setItem('jwt', jwt); 
     } 
    }, 

    logoutUser:() => { 
     RouterContainer.get().transitionEnter('/home'); 
     localStorage.removeItem('jwt'); 
     AppDispatcher.dispatch({ 
     actionType:LOGOUT_USER 
     }); 
    } 
} 

最後に、私はまだルートV4におけるこれらgetCurrentQuery(),transitionToの代替になるものを発見していません。

Answer 1

ルータV4はRedirect成分を有する反応します。有効なjwtがある場合は、アプリの認証された部分にリダイレクトすることができます。何かのように

// drop this in your render() 

const path = yourIsLoggedInCheck ? '/loggedInHome' : '/login'; 
<Redirect to={path} />; 

アプリのログインした部分でまだ認証チェックを行っていることを確認してください。

最後に、私はまだ のためにこれらのgetCurrentQuery（）置換であるものを発見していない

あなたのクエリ文字列データを取得しwithRouter高次のコンポーネントを使用することができます。コンポーネントをラップするとlocation支柱にアクセスできます。

// let's say you're looking for a query string param called myParam 

// ... 
    let myParam = null; 
    if (this.props.location.search) { 
    myParam = location.search.split('myParam=')[1].split('&')[0] || null; 
    } 
// ... 

export default withRouter(YourComponent);