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

用于身份验证的PrivateRoute组件

2 个答案: