Question

我正在将Firebase user authentication服务与reactjs一起使用。呈现组件后，auth.onAuthStateChanged函数触发时出现问题。我正在使用protected路线并将道具传递给它。这会导致将用户重定向到特定页面的问题。

Ex：domain.com/signin页应在用户通过身份验证后将用户重定向到domain.com/customers。当前仅进入domain.com，当用户注销时，应重定向到domain.com/signin。

代码：https://codesandbox.io/s/serverless-leaf-pgtf1?fontsize=14

我尝试了这段代码

auth.onAuthStateChanged(user => {
    if (user && user.emailVerified) {
       this.setState({
         authenticated: true
      });
    } else {
       this.setState({
         authenticated: false
       });
    }
});

Answer 1

您的UnauthorizedRoute高阶组件已设置为在未验证用户身份时将其直接重定向到首页，即domain.com/。

const UnauthorizedRoute = ({
  component: Component,
  authenticated,
  ...rest
}) => {
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === false ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to="/" />
        )
      }
    />
  );
};

要在用户通过身份验证后将其重定向到特定页面，您可以做的是在UnauthorizedRoute组件中添加一个额外的道具，例如afterAuthPath，如果该道具可用， UnauthorizedRoute组件会在用户通过身份验证后将用户重定向到afterAuthPath路径，否则它将使用重定向到主页的默认行为。实现可以是这样的：

const UnauthorizedRoute = ({
  component: Component,
  authenticated,
  afterAuthPath,
  ...rest
}) => {
  const redirectPath = afterAuthPath || "/";
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === false ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to={redirectPath} />
        )
      }
    />
  );
};

然后，您可以针对登录和任何其他需要这种行为的路由进行此操作：

<UnauthorizedRoute
  authenticated={props.authenticated}
  path="/signin"
  afterAuthPath="/customers"
  component={SignInCustomer}
/>

Reactjs Firebase用户身份验证受保护的路由

1 个答案: