用于认证的PrivateRoute组件

Question

我正在开发一个Reactjs-nodejs应用程序。我想做一个JWT认证。当我们登录时，我给用户一个唯一的令牌。然后，由于这个令牌，如果它是有效的，我允许用户通过我的路由器导航。我的私有路由组件类似于：PrivateRoute

现在的问题是我的privateRoute总是重定向到“/”路径。我想是因为axios（promise）给我的用户ID太晚了。请告诉我你是否理解得很好，如果你有解决办法。谢谢你

Answer 1

您可以像这样创建私有路由。

const PrivateRoute = ({ component: Component, ...props }) => {
  return (
    <Route
      {...props}
      render={innerProps =>
        localStorage.getItem("Token") ? (
          <Component {...innerProps} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
};

然后可以使用

<PrivateRoute path="/" component={FIlname} />