Spring Boot React Выход Google OAuth2 не перенаправляет - PullRequest
Новая
       7

Spring Boot React Выход Google OAuth2 не перенаправляет

0 голосов
/ 11 февраля 2019

Я кодирую веб-приложение, которое позволит пользователям входить в систему с помощью учетной записи 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()

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Ваша 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";
  });
}
0 голосов
/ 13 февраля 2019

Обновление: это решение, которое я придумал, следуя предложению 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 });
0 голосов
/ 11 февраля 2019

Вызов axios не будет перенаправлять вас, вы должны сами обработать это на внешнем интерфейсе, если в коде ответа HTTP указано перенаправление

...