Реагировать на сессию магазина

Question

Я захожу в свой бэкэнд через реакцию по этому коду:

export function PostData(type, userData) {

let BaseUrl = 'http://localhost:8080/';

return new Promise((resolve, reject) => {
let formData = new FormData();
formData.append('username', userData.username);
formData.append('password', userData.password);

fetch(BaseUrl + type, {
  method: 'POST',
  body: formData,
})
.then((responseJson) => {
  console.log(responseJson);
  resolve(responseJson);
})
.catch((error) => {
  reject(error);
});

}); }

далее я хочу получить данные с другого URL следующим образом:

import React, { Component } from 'react';

class Datas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false
    }
  }
  componentDidMount() {

      fetch('http://localhost:8080/api/tasks/', {
        headers : {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      })
      .then(response => { return response.json() })
      .then(results => this.setState({
        tasks: results,
        isLoading: false
      }));

  }
  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    }
    return (
        <div classname="App">

          <ul>
            {items.map(item => (
                <li key="{item.id}">
                  Name: {item.name} | Email: {item.description}
                </li>
            ))}
          </ul>
        </div>
    );
  }
}
export default Datas;

но я получил ошибку 401: неавторизован, поэтому мой вопрос: как я могу получить данные, должен ли я каким-то образом хранить сессию? Я подумал, что если я войду в бэкэнд-приложение и получу сообщение со статусом 200, по умолчанию я могу сделать запрос, который хочу. Пожалуйста, о помощи / подсказки

Конфигурация Spring Security:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

  @Autowired
  private MyUserDetailsService userDetailsService;

  @Autowired
  private UserRepository userRepository;

  @Autowired
  private RestAuthenticationEntryPoint restAuthenticationEntryPoint;

  @Autowired
  private MySavedRequestAwareAuthenticationSuccessHandler mySuccessHandler;

  private SimpleUrlAuthenticationFailureHandler myFailureHandler = new SimpleUrlAuthenticationFailureHandler();

  @Override
  protected void configure(final AuthenticationManagerBuilder auth) throws Exception {
    auth.authenticationProvider(authenticationProvider());
  }

  @Bean
  public DaoAuthenticationProvider authenticationProvider() {
    DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
    authProvider.setUserDetailsService(userDetailsService);
    authProvider.setPasswordEncoder(encoder());
    return authProvider;
  }

  @Bean
  public PasswordEncoder encoder() {
    return new BCryptPasswordEncoder(11);
  }

  @Override
  protected MyUserDetailsService userDetailsService() {
    return userDetailsService;
  }

  @Bean
  public SimpleSocialUserDetailsService simpleSocialUserDetailsService() {
    return new SimpleSocialUserDetailsService(userRepository);
  }

  @Override
  protected void configure(final HttpSecurity http) throws Exception {
    http
          .cors()
        .and()
          .csrf().disable()
          .exceptionHandling().authenticationEntryPoint(restAuthenticationEntryPoint)
        .and()
          .authorizeRequests()
          .antMatchers("/login*", "/success*").anonymous()
          .antMatchers("/auth/**", "/signup/**", "/css/*", "/webjars/**","/js/*","/image/*").permitAll()
          .anyRequest().authenticated()
        .and()
          .formLogin()
          .successHandler(mySuccessHandler)
          .failureHandler(myFailureHandler)
          .loginProcessingUrl("perform_login")
//          .successForwardUrl("/tasks")
        .and()
          .logout()
          .logoutUrl("/logout")
          .logoutSuccessUrl("/logout-success").permitAll()
        .and()
          .apply(new SpringSocialConfigurer());
  }

  @Bean
  CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedMethods(Arrays.asList("HEAD",
        "GET", "POST", "PUT", "DELETE", "PATCH"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
  }

}

Answer 1

Ваша / login конечная точка является анонимной, то есть она не требует какой-либо аутентификации перед попыткой доступа к ней, она просто ожидает некоторые данные (учетные данные) и возвращает вам что-то (возможно, токен аутентификации). Затем вы можете сохранить этот токен ( localStorage ) и передать его в заголовках как 'Авторизация:' (Bearer / Basic) _YOUR_TOKEN _ ' с вашими вызовами API.

EDIT:

Если вы получили токен после входа в систему, вы можете сделать что-то вроде:

localStorage.setItem('__MY_TOKEN__', response.data.access_token)

затем создайте вспомогательную функцию для извлечения и автоматического ввода заголовков для вас:

 function apiCall(url, method = 'GET', body) {
    return fetch(url, {
       method,
       body,
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
         'Authorization': 'Bearer ' + localStorage.getItem('__MY_TOKEN__')
      }
    })
 }

тогда вместо fetch (...). Затем (...) вы можете использовать apiCall ('http://localhost:8080/api/tasks').then(...)

Тип авторизации и контент зависят от вашего бэкэнда. Мое решение основано на предположении, что вы получите обратно токен доступа.