Working on my initial login implementation in Angular. Everything seems to be functioning correctly - the user can log in, gets redirected to the GiveDashboardComponent, and the "login" button on the nav bar changes to "logout" accordingly. However, I noticed that these changes only take effect after manually refreshing the page. Is there a better way to handle this in Angular or did I make a mistake in my current code?
This is my LoginComponent:
export class LoginComponent implements OnInit {
user: User = new User();
errorMessage: string = '';
constructor(
private authService: AuthenticationService,
private router: Router,
public sharedService: SharedService
) {}
ngOnInit(): void {
if (this.authService.currentUserValue?.id) {
this.router.navigate(['/give-dashboard']);
}
}
exit() {
this.sharedService.showLoginComponent = false;
}
login() {
this.authService.login(this.user).subscribe(
(data) => {
this.router.navigate(['/give-dashboard']);
},
(err) => {
this.errorMessage = 'Username or password is incorrect.';
console.log(err);
}
);
}
}
This is the Navigation bar component:
export class NavBarComponent implements OnInit {
isLoggedIn = false;
user: User = new User();
constructor(
private router: Router,
private authService: AuthenticationService,
private sharedService: SharedService
) {}
ngOnInit(): void {
this.authService.loggedUser.subscribe((res) => {
if (res) {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
});
}
showLogin() {
this.sharedService.showLoginComponent = true;
}
logout() {
this.authService.logout();
this.router.navigate(['']);
this.isLoggedIn = false;
}
}
And the Dashboard component (I attempted navigation but it's not working as expected)
export class GiveDashboardComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit(): void {
this.router.navigate(['/give-dashboard']);
}
}
Finally, authenticationService:
export class AuthenticationService {
public currentUser: Observable<User>;
private currentUserSubject: BehaviorSubject<User>;
private isLoggedIn = new BehaviorSubject<boolean>(this.userIsLoggedIn());
public loggedUser = this.isLoggedIn.asObservable();
constructor(private http: HttpClient) {
let storageUser;
const storageUserAsStr = localStorage.getItem('currentUser');
if (storageUserAsStr) {
storageUser = JSON.parse(storageUserAsStr);
}
this.currentUserSubject = new BehaviorSubject<User>(storageUser);
this.currentUser = this.currentUserSubject.asObservable();
}
public get currentUserValue(): User {
return this.currentUserSubject.value;
}
login(user: User): Observable<any> {
return this.http.post<User>(API_URL + '/sign-in', user).pipe(
map((res) => {
if (res) {
// set session-user
this.setSessionUser(res);
} else {
return false;
}
return res;
})
);
}
register(user: User): Observable<any> {
return this.http.post<User>(API_URL + '/sign-up', user).pipe(
map((res) => {
if (res) {
this.setSessionUser(res);
} else {
return false;
}
return res;
})
);
}
setSessionUser(user: User) {
localStorage.setItem('currentUser', JSON.stringify(user));
this.currentUserSubject.next(user);
}
logout() {
localStorage.removeItem('currentUser');
this.currentUserSubject.next(new User());
// this.currentUserSubject.next(null);
}
refreshToken(): Observable<any> {
return this.http.post(
API_URL + '/refresh-token?token=' + this.currentUserValue?.refreshToken,
{}
);
}
userIsLoggedIn() {
return !!localStorage.getItem('currentUser');
}
}