Estou com uma dúvida em relação em como é feito o redirecionamento de página após efetuar o login. Tenho um formulário de login no front-end, que faz a requisição de login via POST, enviando username e password, mas após receber a reposta 200 OK, o redirecionamento é feito no backend ou front? Tentei fazer via .defaultSuccessUrl mas não dá certo. Código abaixo:
SecurityConfig:
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@EnableWebSecurity
public class SecurityConfig {
@Bean
public AuthenticationManager authenticationManager(AuthenticationConfiguration authenticationConfiguration) throws Exception {
return authenticationConfiguration.getAuthenticationManager();
}
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues())
.and()
.httpBasic()
.and()
.authorizeHttpRequests()
.antMatchers(HttpMethod.POST, "/api/cadastrar").permitAll()
.antMatchers(HttpMethod.GET, "/api/item-cardapio").permitAll()
.antMatchers(HttpMethod.POST, "/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin().loginPage("http://127.0.0.1:5500/tela-login/login.html")
.passwordParameter("password").usernameParameter("username")
.defaultSuccessUrl("http://127.0.0.1:5500/tela-produtos/produtos.html")
.and()
.csrf().disable();
return http.build();
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}Método /login:
@RestController
@CrossOrigin(origins = "*")
@RequestMapping
public class LoginController {
@Autowired
AuthenticationManager authManager;
@PostMapping("/login")
public ResponseEntity<?> logar(@RequestBody @Valid LoginDTO loginDTO){
UsernamePasswordAuthenticationToken dadosLogin = loginDTO.converter();
try {
authManager.authenticate(dadosLogin);
return ResponseEntity.ok().build();
} catch (AuthenticationException e) {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}
}
}Login via POST no front:
const form = document.getElementById("form");
let username = document.getElementById("username");
let password = document.getElementById("password");
form.addEventListener("submit", (e) => {
e.preventDefault();
checkaInputsECadastra();
});
function checkaInputsECadastra() {
const usernameValue = username.value;
const passwordValue = password.value;
if (usernameValue === "") {
setErrorFor(username, "O usuário não foi informado!");
} else {
setSuccessFor(username);
}
if (passwordValue === "") {
setErrorFor(password, "A senha não foi informado!");
} else {
setSuccessFor(password);
}
const formControls = form.querySelectorAll(".form-control");
const formIsValid = [...formControls].every((formControl) => {
return formControl.className === "form-control success";
});
if (formIsValid) {
console.log("O formulário está 100% válido!");
//Transforma os dados do usuário em JSON
usuario = {
"username": username.value,
"password": password.value,
}
//Envia para a API e encaminha para a tela de produtos
logar(usuario);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector("small");
// Adiciona a mensagem de erro
small.innerText = message;
// Adiciona a classe de erro
formControl.className = "form-control error";
}
function setSuccessFor(input) {
const formControl = input.parentElement;
// Adicionar a classe de sucesso
formControl.className = "form-control success";
}
//Método POST para cadastrar na API
function logar(usuario) {
let request = new XMLHttpRequest();
request.open("POST", "http://localhost:8080/login", true);
request.setRequestHeader("Content-type", "application/json");
request.send(JSON.stringify(usuario));
}