PrivateRoute - 如何等待来自异步的响应？

Question

我有一个 PrivateRoute 来验证令牌是否有效并且它是一个异步函数。问题是：我对渲染视图的验证不起作用，它总是在渲染：

App.js

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
  />
);

const Routes = () => (
  <BrowserRouter>
    <Fragment>
      <Switch>
        <Route exact path="/" component={SignIn} />
        <PrivateRoute path="/app" component={App} />
      </Switch>
      <ModalContainer />
    </Fragment>
  </BrowserRouter>
);

export default Routes;

auth.js

import axios from 'axios'

export const isAuthenticated = async () => {
  const isValidRequest = false;

  const resp = await axios.get('http://127.0.0.1:8080...')
  data = resp.data;
  console.log(data);

  ....// more code

  return isValidRequest;  
}

如何确保 PrivateRoute 将等待函数 isAuthenticated()？

更新1：

const Routes = () => {
  const [state, setState] = useState({isLoading: true, authenticated: false});
  useEffect(() => {
    async function checkAuth() {
        const isAuth = await isAuthenticated();
        setState({isLoading: false, authenticated: isAuth});
    }
  }, []);

  if(state.isLoading) {
     return <div>Loading....</div>
  }
  return (
    <BrowserRouter>
      <Fragment>
        <Switch>
          <Route exact path="/" component={SignIn} />
          <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} />
        </Switch>
        <ModalContainer />
      </Fragment>
    </BrowserRouter>
  );

}

Answer 1

不是在所有PrivateRoutes 中调用isAuthenticated，而是在Routes component 中调用它一次，以便只执行一次检查，然后将值作为prop 传递。另请注意，在获取数据时保持加载状态

请注意，您的 isAuthenticated 函数是一个异步函数，因此您必须等到 promise 得到解决。你可以使用 async-await 或者使用传统的 promise 方法

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
  />
);

const Routes = () => {
    const [state, setState] = useState({isLoading: true, authenticated: false});
    useEffect(() => {
      async function checkAuth() {
         const isAuth = await isAuthenticated();
         setState({isLoading: false, authenticated: isAuth});
     }
      checkAuth();
   }, []);
    if(state.isLoading) {
       return <Loader/>
    }
    return (
      <BrowserRouter>
        <Fragment>
          <Switch>
            <Route exact path="/" component={SignIn} />
            <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} />
          </Switch>
          <ModalContainer />
        </Fragment>
      </BrowserRouter>
    );

}

export default Routes;

---

更新：由于你没有使用react v16.8.0以上版本，所以可以通过类组件实现上述逻辑

class Routes extends React.Component {
    state = {isLoading: true, authenticated: false};

    async componentDidMount() {
         const isAuth = await isAuthenticated();
         this.setState({isLoading: false, authenticated: isAuth});
    }

    render() {
        if(state.isLoading) {
           return <Loader/>
        }
        return (
          <BrowserRouter>
            <Fragment>
              <Switch>
                <Route exact path="/" component={SignIn} />
                <PrivateRoute path="/app" isAuthenticated={state.authenticated} component={App} />
              </Switch>
              <ModalContainer />
            </Fragment>
          </BrowserRouter>
        );
      }

}

export default Routes;

Answer 2

这可能是因为isAuthenticated() 返回了一个被视为真值的 Promise，因此三元条件将呈现组件。

试试这个：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={async (props) => {
      const authenticated = await isAuthenticated();
      return authenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      )
    }
    }
  />
);

我认为这应该可以工作，除非 Route 组件的 render 属性不允许异步函数。

Answer 3

我建议您存储您的进度并根据它返回：

const PrivateRoute = ({ component: Component, ...rest }) => (
  const [finished, setFinished] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    isAuthenticated().then(result => {
      setFinished(true);
      setIsAuthenticated(result);
    });
  }, []);

  <Route
    {...rest}
    render={props =>
      finished && isAuthenticated ? (
        <Component {...props} />
      ) : finished && !isAuthenticated ? (
        <Redirect to={{ pathname: "/", state: { from: props.location } }} />
      ) : null
    }
  />
);

Answer 4

当isAuthenticated() 的结果为undefined 时，您可以显示加载消息，以等待promise 被解决：

const PrivateRoute = ({ component: Component, ...rest }) => {
    const isAuthenticated = isAuthenticated();


    if (isAuthenticated === undefined) {
        return <p>
           Loading ...
        </p>
    }
    return isAuthenticated ?
    <Route  {...rest} render={props => <Component {...props}/>} /> :
    <Redirect to={{ pathname: "/", state: { from: props.location } }} />
}