Spring Boot React Google OAuth2注销未重定向答案

【问题标题】：Spring Boot React Google OAuth2 logout not redirectingSpring Boot React Google OAuth2注销未重定向
【发布时间】：2019-02-11 08:57:05
【问题描述】：

我正在编写一个 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()

【问题讨论】：

标签： spring-boot react-redux axios spring-security-oauth2

【解决方案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";
  });
}

【讨论】：

我正在发送一个 POST 以满足在服务器端使用 csrf 保护。文档说它需要一个带有 X-XSRF-TOKEN 的 POST。
谢谢，我能想出与您在这里建议的非常相似的东西。

【解决方案2】：

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

【讨论】：

感谢您为我解决这个问题。这就是我想出的，可能不是世界上最好的代码，但它现在可以工作。我认为某种 React Router 或 Redux 实现将是最佳实践，但我目前对它们还不够熟悉，无法实现。

【解决方案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 });

【讨论】：