Spring Boot React Google OAuth2 注销不重定向

Question

我正在编写一个 Web 应用程序，它将允许用户使用 Google OAuth2 帐户登录。我在前端使用 Node React，在后端使用 Spring Boot。到目前为止，我的登录功能正在运行。注销功能似乎也有点用，因为我能够在控制台日志中看到预期的响应。我遇到的麻烦是我希望在单击注销按钮后被重定向到 http://localhost:8080/greeting，但是这并没有发生。我究竟做错了什么？

Header.js

class Header extends Component {
  renderContent(){
    switch (this.props.auth){
      case null:
        return;
      case false:
        return <li><a href="login/google">Login</a></li>
      default:
        return <li><button onClick={this.handleLogout} >Logout</button></li>
    }
  }
  ...
handleLogout = () => {
  axios({method: 'post',
         url: "http://localhost:8080/logout",
         withCredentials: true,
         headers: {'X-XSRF-TOKEN': cookies.get('XSRF-TOKEN')}
        })
  .catch(error => console.log('BAD', error))
  .then(reponse => console.log('GOOD', reponse));
        return response;            
    }
}

WebApp.java

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.antMatcher("/**")
        .authorizeRequests()
        .antMatchers(
      "/**",
                 "/login",
                "/greeting",
                "/error**",
                "/api/**").permitAll()
      .anyRequest().authenticated()
      .and()
    .exceptionHandling()
      .authenticationEntryPoint(new LoginUrlAuthenticationEntryPoint("/"))
      .and()
    .logout().logoutSuccessUrl("/greeting").permitAll()
            .and()
    .csrf()
      .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
      .and()

Answer 1

axios 调用不会为您重定向，如果 HTTP 响应代码指示重定向，您必须在前端自行处理

Answer 2

您的 handleLogout 函数向服务器执行 AJAX 请求 - 因此任何重定向响应都将由您的回调函数处理，而不是浏览器 - 并且不会发生重定向。

您可以进行同步。向您的服务器请求（不是 AJAX）或者您可以在客户端执行重定向（在您的回调中使用一些 JS 代码）。

我会推荐第一个选项：

<li><button onClick={this.handleLogout} >Logout</button></li>

变为：

<li><a href="http://localhost:8080/logout" >Logout</a></li>

更新 1： 如果您强制使用 HTTP POST 方法执行请求，那么您可以在 "onSuccess" 回调中执行重定向（axios 理解重定向并遵循重定向 link ):

handleLogout = () => {
  axios({method: 'post',
         url: "http://localhost:8080/logout",
         withCredentials: true,
         headers: {'X-XSRF-TOKEN': cookies.get('XSRF-TOKEN')}
        })
  .catch(error => console.log('BAD', error))
  .then(reponse => {
    window.location.href = "http://localhost:8080/greeting";
  });
}

Answer 3

更新：这是我根据乔纳什的建议提出的解决方案。我认为这是一个临时修复，直到我足够了解 React 以使用最佳实践进行重构。

已更新Header.js

handleLogout = () => {
  axios({method: 'post',
         url: "http://localhost:8080/logout",
         withCredentials: true,
         headers: {'X-XSRF-TOKEN': cookies.get('XSRF-TOKEN')}
        })
  .catch(error => console.log('BAD', error))
  .then(response => { window.location = response.request.responseURL });

Spring Boot React Google OAuth2 注销不重定向

Spring Boot React Google OAuth2 logout not redirecting

spring-boot

spring-security-oauth2

react-redux

axios