用于身份验证的 PrivateRoute 组件

Question

我正在开发一个 Reactjs-nodejs 应用程序。我想做一个 JWT 认证。当我们登录时，我给用户一个唯一的令牌。然后，多亏了这个令牌，如果它有效，我允许用户浏览我的路由器。我的私人路线组件是这样的： PrivateRoute

我的函数getId是这样的：

异步函数 getId(){ 让 res = await axios('_/api/users/me',{config}).catch(err => { console.log(err)});

返回 res+1; }

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

常量配置 = { 标头：{授权：${window.localStorage.getItem("token")}} };

GetId() 如果登录则返回用户的id，否则为null。

现在的问题是我的 privateRoute 总是重定向到“/”路径。我认为这是因为 axios(promise) 给我 userId 太晚了。如果你理解得很好，如果你有解决方案，请告诉我。 谢谢你

Answer 1

如果您使用的是 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} />;
            }
        }}
    />
);

Answer 2

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

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