如何配置 spring-boot-security 以使用登录页面对所有页面中的用户进行身份验证

Question

I have a basic spring boot application which shows a table of a database and allows you to do the basic CRUD operations using angular.

My task is to make the app secured using spring-boot-security. I've already implemented te following security config.

    @Configuration
@EnableWebSecurity
public class ApplicationSecurityConfig extends WebSecurityConfigurerAdapter {


    private final PasswordEncoder passwordEncoder;

    @Autowired
    public ApplicationSecurityConfig(PasswordEncoder passwordEncoder) {
        this.passwordEncoder = passwordEncoder;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors();
        http.csrf().disable();
        http.authorizeRequests().antMatchers("/**").fullyAuthenticated().and
                ().httpBasic();

    }

    @Override
    @Bean
    protected UserDetailsService userDetailsService() {
         UserDetails user = User.builder()
                .username("user")
                .password(passwordEncoder.encode("password"))
                .roles("USER")
                .build();

        return new InMemoryUserDetailsManager(
                user
        );

    }


}

It works fine, I can access the data with the given credentials using postman.

The problem occurs when I try to get the data using angular. I've already created a login component, which authenticates me, and it sends me the response I gave in the controller, which looks like this:

@GetMapping("/")
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
public String login() {
    return "Authenticated successfully.";
}

The angular service I'm using is this:

login(username: string, password:string) {
const headers = new HttpHeaders(
  {
       'Authorization':'Basic '+btoa((username +":"+ password))
  });
  return this._http.get("http://localhost:8080/", {headers, responseType:'text' as 'json'});

}

In the login component, i have the following login function, which is called when the button is clicked:

 doLogin() {
   let resp = this._service.login(this.username, this.password);
   resp.subscribe(data => {
     console.log(data);
     this._route.navigate(["/movieList"]);
   })   
  }

It gives me the Authenticated Successfully message, and redirects me to the movieList page, but I cant't access the datas, because it also gives me the following error:

Answer 1

What you are missing here is the usage of JWT token. The security workflow should be like these steps:

1- From Angular you send the user's credentials.

2- In Spring you verify theses credentials, you generate a JWT token and you send it back to angular.

3- Angular saves the JWT in the local storage and uses it in the future request (as an athaurization param in XHR headers).

So you should implement JWT service in Spring, Login service and an Interceptor in Angular.

the following link explains well how to implement it: SPRING ANGULAR JWT TUTO