用于认证的PrivateRoute组件

Question

我正在开发一个Reactjs-nodejs应用程序。我想进行JWT身份验证。当我们登录时，我给用户一个唯一的令牌。然后，感谢此令牌（如果有效），我允许用户浏览我的路由器。我的私人路线组件像：PrivateRoute

我的函数getId就是这样：

异步函数getId（）{let res =等待axios（'_ / api / users / me'，{config}）。catch（err => {console.log（err）}）;

返回res + 1;}

最后，配置组件是存储在localStorage中的令牌：

const config = {标头：{授权：${window.localStorage.getItem("token")}}};

GetId（）如果已登录，则返回用户的ID，否则为null。

现在的问题是我的privateRoute总是重定向到“ /”路径。我认为是因为axios（promise）给了我userId太晚了。请告诉我您是否了解并有解决方案。谢谢

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} />

Answer 2

如果使用redux，则可以进行以下操作：

在还原器中：

case LOGIN_ADMIN_SUCCESS:
            localStorage.setItem("token", action.payload.token);
            return {
                ...state,
                user: action.payload,
                isSignedIn: true,
                loadingSignIn: false,
                token: action.payload.token,
            };

然后您必须在专用路由器中检查这些值，例如

const PrivateRoute = ({ component: Component, admin, ...rest }) => (
    <Route
        {...rest}
        render={(props) => {
            if (admin.loadingSignIn) {
                return <h3>Loading...</h3>;
            } else if (!admin.isSignedIn) {
                return <Redirect to="/login" />;
            } else {
                return <Component {...props} />;
            }
        }}
    />
);