javascript - ReactJS:如果在 promise 解决后经过身份验证，则呈现私有(private)路由

Question

我有这个PrivateRoute功能组件决定渲染作为用户的 props 传递的组件，该用户可以根据用户的身份验证访问该组件或重定向到未经授权的路由。

isValidToken是一个异步函数，检查用户是否具有有效 token 并返回分配给 isUserLogged 的 bool 值 .so当我在 useEffect 中调用这个函数时钩子(Hook)等待函数解析，但在完成之前会发生重定向。那么我如何等待它解析并在 promise 解析之前根据该值进行渲染？

import React, { useState, useEffect } from "react";
import { Route, Redirect } from "react-router-dom";
import isValidToken from "../utils/isValidToken";

const ProtectedRoute = ({ component: Comp, path, redirectto, ...rest }) => {
  const [isloggedin, setloggedin] = useState(false);

  useEffect(() => {
    (async function() {
      const isUserLogged = await isValidToken();
      setloggedin(isUserLogged);
    })();
  }, []);

  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        return isloggedin ? (
          <Comp {...props} />
        ) : (
          <Redirect to={redirectto} />
          // <h1>404 error</h1>
        );
      }}
    />
  );
};

export default ProtectedRoute;

Answer 1

为了避免过早重定向，您的组件需要考虑 Promise 的“待处理状态”(位于异步函数调用背后)。

在挂起(或“正在加载”)状态期间，您通常会呈现类似加载微调器的内容，以向用户指示应用程序正忙。关键是不要渲染 <Comp />或<Redirect />组件直到 promise 得到解决(或拒绝):

import React, { useState, useEffect } from "react";
import { Route, Redirect } from "react-router-dom";
import isValidToken from "../utils/isValidToken";

const ProtectedRoute = ({ component: Comp, path, redirectto, ...rest }) => {

  /* Track the state of your app instead. Start with a "loading" state */
  const [state, setState] = useState('loading');

  useEffect(() => {
    (async function() {
      try {
        /* Update effect logic to track correct state */
        const isUserLogged = await isValidToken();
        setState(isUserLogged ? 'loggedin' : 'redirect');
      }
      catch {
        setState('redirect');
      }
    })();
  }, []);
  
  /* If in loading state, return loading message while waiting for 
  isValidToken to complete */
  if(state === 'loading') {
    return <div>Loading..</div>
  }

  return (
    <Route
      path={path}
      {...rest}
      {/* Decide what component to render based on state */
      render={props => ((state === 'loggedin') ? 
        <Comp {...props} /> : 
        <Redirect to={redirectto} />) }
    />
  );
};

export default ProtectedRoute;