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

Web app.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

您的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了解重定向并遵循重定向链接）：

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 2

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

Answer 3

更新：这是我提出的解决方案，遵循jonash的建议。我认为这是一个临时修复，直到我学习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 });