Currently, I am enrolled in a course on Udemy where the instructor is utilizing Angular 2. My task involves building the app using the latest version of Angular. The issue that I am facing pertains to the logout functionality. After successfully logging out and refreshing the page to display the login form again, I notice that the system briefly shows the login form before reverting back to the logged-in state.
The backend's logout method:
@RequestMapping(value="/loggedOut", method=RequestMethod.POST)
public ResponseEntity logout(){
SecurityContextHolder.clearContext();
return new ResponseEntity("Logout Successful!", HttpStatus.OK);
}
The logout function within my login service:
logOut() {
const url = 'http://localhost:8181/loggedOut';
const basicHeader = 'Basic ' + localStorage.getItem('credentials');
const headers = new HttpHeaders({
'x-auth-token' : JSON.stringify(localStorage.getItem('xAuthToken')),
'Authorization' : basicHeader
});
return this.http.post(url, '', { headers, responseType: 'text'});
The button responsible for initiating the logout process:
logout() {
this.loginService.logOut().subscribe(
res => {
location.reload();
console.log("Logged out")
},
error => {
console.log(error)
}
);
Essentially, the flow goes as follows: Logged in -> Login form -> Logged in
Snapshot of being logged in: https://i.sstatic.net/AO8Jj.png
Screenshot of the login form: https://i.sstatic.net/rHL4O.png
When removing the reload method, it is evident that the logout method is triggered and receives a 200 response from the backend.
https://i.sstatic.net/J6krZ.png
Network tab status prior to refreshing:
https://i.sstatic.net/LghYO.png
Response received from the server before refreshing: