Question

我通过SSO为我的根路径“ /”实现了自动登录，以通过使用PrivateRoute重定向到“ / login”来简化用户的工作，并且运行良好-如果未登录，它会重定向到/ login并通过SSO进行身份验证：< / p>

const Routes = () => (
<div className="view-routes">
<ErrorBoundaryRoute path="/login" component={Login} />
<ErrorBoundaryRoute path="/loggedout" component={HomePanel} />
<Switch>
  <ErrorBoundaryRoute path="/logout" component={Logout} />
  <PrivateRoute path="/" component={HomePanel} hasAnyAuthorities={[AUTHORITIES.USER]} />
</Switch>
</div>
);

问题是我的注销组件看起来像：

export class Logout extends React.Component<ILogoutProps> {
 componentDidMount() {
    this.props.logout();
 }

render() {
 return (
  <div className="p-5">
    <h4>Logged out successfully!</h4>
    <Redirect
      to={{
        pathname: '/loggedout'
      }}
    />
  </div>
 );
 }
}

如在路由中看到的，/ loggedout映射到相同的HomePanel，但这一次是通过“常规”路由进行的，这应该避免自动认证。它确实会注销，但是由于某种原因重定向到/ loggedout后，它会立即转到“ /”路径，这会再次导致自动登录。

我的问题是：为什么它不简单地绘制HomePanel，而是像再次通过PrivateRoute一样工作？如果在这种情况下应该如何反应，该如何处理注销？

Answer 1

您的Switch语句放置不正确，因为它仅验证/logout和/。如果用户访问/login，则/loggedout。在这两种情况下，相应的路线都将与/路线

一起呈现

将代码更改为

const Routes = () => (

    <div className="view-routes">
        <Switch>
          <ErrorBoundaryRoute path="/login" component={Login} />
          <ErrorBoundaryRoute path="/loggedout" component={HomePanel} />
          <ErrorBoundaryRoute path="/logout" component={Logout} />
          <PrivateRoute path="/" component={HomePanel} hasAnyAuthorities={[AUTHORITIES.USER]} />
        </Switch>

    </div>

);

Answer 2

好的。 React可以正常工作，并且可以在私有和常规路由中使用相同的组件。

该问题是由注销方法具有返回URL的事实引起的：

export const logout = () => dispatch => {
  window.location.href = SAML_LOGOUT + `?return=${encodeURIComponent(LOGOUT_URL)}`;
};

因此，重定向发生了两次：一次是注销方法，另一次是组件。我将它们更改为相同的值，现在可以正常使用了。

在专用路线和常规路线中使用不同路径映射的相同组件-两者都在专用路线中起作用

2 个答案: