Angular Authgaurd 登录后不重定向或强制应用程序到主页

Question

Routing module

{
    path:'login',
  component:LoginComponent
    },
  {
  path: '',
  component: DefaultComponent,
 canActivate:[AuthGuard],
  children: [{
    path: '',
    component: DashboardComponent
  },

Login component.ts

let hey=data["API Key"]
    let id=data["id"]
    console.log(id);
    console.log(hey);

    localStorage.setItem("key",hey),
  
    
    this.router.navigateByUrl('/');
    // window.location.reload(true)

Authgaurd.ts

canActivate():boolean{
  if (this._authsevice.loggedIN()){
    return true
  }
  else{
    this._router.navigate(['/login'])
    return false
  }
}

Authservice.ts

export class AuthService{

     loggedIN(){
         return !!localStorage.getItem('key')
     }
}

as soon as authenticated,it creates a key and stores it but i cant understand why the page is still being in login page without redirecting or navigating and forcing authservice to search for key
when i forcefully reload the page i still get the login page and with the second time authentication I'm able to access all the other pages

i dont understand why and how to force angular application to view once the key is being stored

Answer 1

you can return an URL tree, you should do:

canActivate(): boolean | UrlTree {
  if (this._authsevice.loggedIN()){
    return true
  }
  return this._router.navigate(['/login'])
}

to answer your question:

use an Observable for your login state with a BehaviourSubject , you use Observable<boolean | UrlTre> Observable<boolean | UrlTre> as return value in canActivate .