When I send a GET request to retrieve the page in Postman along with the authorization header, I see the following in the console logs:
2024-06-26 17:33:53.036 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:33:53.037 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Jwt Token: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg
2024-06-26 17:33:53.037 INFO 6856 --- [nio-8080-exec-3] u.d.P.security.JWTTokenConfig : Received JWT token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTE4MDYsImlhdCI6MTcx OTQwODgwNn0.YOdWUsdkTl4E4ucZ1gjk8sAYKaBMxrsVET5m6rnRXEg
That is, my configuration filter is called once and receives the token. But when I refresh the page in the browser, here is its HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Office Page</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Welcome to Admin Office</h1>
<script>
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
let jwtToken = getCookie("JWT_TOKEN");
console.log('token '+jwtToken);
fetch('/admin_office', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + jwtToken
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
console.log('Server response:',jwtToken );
})
.catch(error => {
console.error('Error sending token to server:', error);
});
</script>
</body>
</html>
I see the following in the logs:
2024-06-26 17:40:50.160 INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.162 INFO 6856 --- [nio-8080-exec-5] u.d.P.security.JWTTokenConfig : Jwt Token: null
2024-06-26 17:40:50.195 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.195 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Jwt Token: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
2024-06-26 17:40:50.196 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : Received JWT token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJleHAiOjE3MTk0MTUwODYsImlhdCI6MT cxOTQxMjA4Nn0.Uwgj-5TuQnFtRxOQBnSVkIiBzTv4hg9swbAXHRX7dec
2024-06-26 17:40:50.201 INFO 6856 --- [nio-8080-exec-6] u.d.PetMusicStorage.service.JWTService : Parsed roles from token: [ROLE_ADMIN]
2024-06-26 17:40:50.201 INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig : Filter starts
2024-06-26 17:40:50.202 INFO 6856 --- [nio-8080-exec-7] u.d.P.security.JWTTokenConfig : Jwt Token: null
2024-06-26 17:40:50.203 INFO 6856 --- [nio-8080-exec-6] u.d.P.security.JWTTokenConfig : User 1 with roles [ROLE_ADMIN]
My configuration filter is called three times, and the JWT token is obtained on the second call. When I make this endpoint protected, the filter is called only once, but the token is not obtained, and I get a 403 error on the frontend. I think the reason is that the request from the frontend first fetches the entire HTML file from the server and then sends the script request. I haven’t delved deeply into JavaScript and HTML yet, so if possible, please explain or, if possible, write the code where the token is immediately sent from the frontend to the server. That is, first the frontend sends the token, and if it is valid, it opens the page. If not, a 403 error is returned.
Everything works on the backend! Access to protected endpoints with a valid token is available.