Currently, I am in the process of developing a web application using the Rest MVC architecture for an online store specializing in coffee and tea products. The technologies being utilized include Spring-Boot, Hibernate, PostgreSQL, Gradle, Thymeleaf, HTML, and CSS. The backend development is complete, and now it's time to work on the frontend. Specifically, I am focusing on creating an authorization page at the moment.
The design of the authorization page has been finalized with HTML and CSS, and now my task is to implement the authentication logic. This involves writing a javascript script that will securely store the generated jwt token in the user's localStorage. However, I'm facing a challenge in passing this token through the header using pure javascript.
It's crucial that the implementation of the javascript code remains clean and free from any external frameworks such as angular or node. How can I accomplish this task effectively?
Just to reiterate, the backend functionality related to Rest-based authorization is functional, where users can input their credentials (login and password) to receive a valid jwt token.
https://i.sstatic.net/KhjNk.png
Here is the snippet of the Java method responsible for handling the authentication:
public ResponseEntity<Map<String, String>> authorization(@RequestBody AuthenticationRequestDTO requestDto) {
try {
String login = requestDto.getLogin();
authenticationManager
.authenticate(new UsernamePasswordAuthenticationToken(login, requestDto.getPassword()));
User user = userRepository.getByLogin(login);
if (user == null) {
throw new AuthenticationServiceException("ddwd");
}
String token = jwtTokenProvider.createToken(login, user.getRole());
Map<String, String> response = new HashMap<>();
response.put("login", login);
response.put("token", token);
return ResponseEntity.ok(response);
} catch (AuthenticationServiceException e) {
log.error("Error: ", e);
throw new AuthenticationServiceException("Invalid login");
}
}