reactjs - 使用react。具有异步获取请求的私有(private)路由器

Question

我在我的应用程序中使用带有 thunk 的 react 路由器 v4 进行路由。
我想阻止渲染 <AccountPage />组件给未登录的用户。我在服务器上发送带有 id 和 token 的 fetch 请求以 checkin 数据库，用户是否有此 token 。如果有 - 渲染 <AccountPage /> ，如果不是 - 重定向回家。

我不明白什么是实现“条件路由”的好方法，我发现一些似乎几乎完全适合我的任务的东西。https://gist.github.com/kud/6b722de9238496663031dbacd0412e9d
但问题是 condition在 <RouterIf />总是未定义的，因为 fetch 是异步的。我处理这个异步的尝试没有任何结果或错误:

Objects are not valid as a React child (found: [object Promise]) ...

或者

RouteIf(...): Nothing was returned from render. ...

这是代码:

//RootComponent
<BrowserRouter>
    <Switch>
        <Route exact path='/' component={HomePage}/>
        <Route path='/terms' component={TermsAndConditionsPage}/>
        <Route path='/transaction(\d{13}?)' component={TransactionPage}/>
        <RouteIf
            condition={( () => {
                if( store.getState().userReducer.id, store.getState().userReducer.token) {


                    // Here i sending id and token on server 
                    // to check in database do user with this id
                    // has this token
                    fetch(CHECK_TOKEN_API_URL, {
                        method: 'post',
                        headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
                        body: JSON.stringify({
                            id: store.getState().userReducer.id,
                            token: store.getState().userReducer.token
                        })
                    })


                    .then res => {
                        // If true – <RouteIf /> will render <AccountPage />, 
                        // else - <Redirect to="/"> 
                        // But <RouteIf /> mounts without await of this return 
                        // You can see RouteIf file below
                        if(res.ok) return true
                        else return false
                    })


                }
            })()}
            privateRoute={true}
            path="/account"
            component={AccountPage}
        />
    </Switch>
</BrowserRouter>




//RouteIf.js
const RouteIf = ({ condition, privateRoute, path, component }) => {
    // The problem is that condition is 
    // always undefined, because of fetch's asyncronosly
    // How to make it wait untill
    // <RouteIf condition={...} /> return result?
    return condition 
    ? (<PrivateRoute path={path} component={component} />)
    :(<Redirect to="/" />)
}

export default RouteIf

制作方法condition等到fetch返回答案？或者也许还有另一种更好的方法来检查用户是否登录？

Answer 1

如果您使用的是 redux，您可以显示临时的“正在加载...” View 。仅当用户为 null 并已加载时，才会重定向路由。

PrivateRoute.js

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';

import { Route, Redirect } from 'react-router-dom';

import { selectors } from 'settings/reducer';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const user = useSelector(state => selectors.user(state));
  const isLoaded = useSelector(state => selectors.isLoaded(state));

  return (
    <Route
      {...rest}
      render={props =>
        !isLoaded ? (
          <></>
        ) : user ? (
          <Component {...props} />
        ) : (
          <Redirect to='/sign_in' />
        )
      }
    />
  );
};

export default PrivateRoute;

PrivateRoute.propTypes = {
  component: PropTypes.any
};

路由.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PrivateRoute from './components/PrivateRoute';

export const Routes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact={true} path='/' component={Home} />
      <PrivateRoute path='/account' component={Account} />
    </Switch>
  </BrowserRouter>
);