当用户成功签名时，React Router Router V4将其重定向到身份验证的路线

Question

我是React和从Angular迁移的新手，并试图用Route V4实现简单的JWT身份验证的Flux React应用。我已经成功地发送了Rails API的请求，并获得了JWT令牌。现在，我找不到任何可以编程的逻辑方式将我的应用程序重定向到登录中经过身份验证的路由组件。

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

在成功向API请求有效令牌后，我想将页面重定向到AuthEnticatedApp组件。由于仅参考旧版本的路线，但是Route 4版本在Internet中很少支持。

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

React Router V4具有重定向组件。如果有有效的JWT，则可以重定向到应用程序的已验证部分。像

// drop this in your render()
const path = yourIsLoggedInCheck ? '/loggedInHome' : '/login';
<Redirect to={path} />;

只需确保您仍在应用程序的一部分登录的登录中进行验证检查。

最后，我还没有找到要替代的 这些getCurrentquery((

您可以使用Fastrouter高阶组件来获取查询字符串数据。包装组件将使您访问location Prop。

// 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);