Navigation Control Module
{
path:'signin',
component:SignInComponent
},
{
path: '',
component: MainComponent,
canActivate:[AuthGuard],
children: [{
path: '',
component: DashboardComponent
},
SignIn component.ts
let accessKey=data["API Key"]
let userId=data["id"]
console.log(userId);
console.log(accessKey);
localStorage.setItem("key",accessKey),
this.router.navigateByUrl('/');
// window.location.reload(true)
AuthenticationGuard.ts
canActivate():boolean{
if (this._authsevice.isLoggedIn()){
return true
}
else{
this._router.navigate(['/signin'])
return false
}
}
AuthService.ts
export class AuthService{
isLoggedIn(){
return !!localStorage.getItem('key')
}
}
After successful authentication, a key is generated and saved. However, the page remains on the login screen without redirecting or navigating, prompting the AuthService to search for the key.
Even after forcibly reloading the page, it still displays the login screen. It is only after authenticating a second time that I am able to access other pages.
I am puzzled by this behavior and unsure how to prompt the Angular application to display content once the key is stored.