當用戶成功登錄時，反應路由器v4重定向到認證路由

我是新手，用於反應並從角度遷移並試圖通過Route v4實現簡單的JWT認證的Flux反應應用。我已經成功發送請求到Rails API並獲得了我的JWT令牌。現在我找不到任何編程邏輯的方式將我的應用程序重定向到LoginAction中經過身份驗證的Route組件。當用戶成功登錄時，反應路由器v4重定向到認證路由

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

在我的LoginAction請求成功與有效令牌API後，我想重定向的頁面AuthenticatedApp組件。由於只有舊版本的路線參考，但路線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 
     }); 
    } 
}

最後，我還沒有發現還是這將是替代這些getCurrentQuery(),transitionTo在路線V4。

來源

2017-06-02 surajnew55

React Router 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);

來源

2017-06-02 14:19:11 mccambridge

當用戶成功登錄時，反應路由器v4重定向到認證路由

回答

相關問題