为什么 Angular router.navigate() 无法导航？

Question

I'm building an authentication in angular. When logged in, the user should be redirected. My problem is that the router.navigate() function doesn't seem to work... This is the code that doesn't work:

async login() {
 if(!this.email || !this.password) {
   return;
 }
 this.showSpinner = true;
 this.authService.login(this.email, this.password).then(
   (data) => {
     this.router.navigate(['/chore/show']);
     console.log(this.router);
   },
   (error) => {
     this.error = error.message;
     this.showSpinner = false;
   }
 );
}

The console.log does show when the login succeeds, but it won't navigate to the chore/show route.

app routes:

const routes: Routes = [
 { path: '', redirectTo: 'auth', pathMatch: 'full' },
 { path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
 { path: 'chore', loadChildren: 
 './modules/chore/chore.module#ChoreModule', canActivate: [AuthGuard] }
];

auth module routes:

const routes: Routes = [
 { path: 'login', component: LoginComponent },
 { path: 'register', component: RegisterComponent},
 { path: '', redirectTo: 'login', pathMatch: "full"}
];

and the chore module routing:

const routes: Routes = [
 { path: 'show', component: ShowChoreComponent},
 { path: '', redirectTo: 'show', pathMatch: 'full' },
];

For some reason i can't get it to redirect after login. Any suggestions? EDIT: Added app routes. Code is on https://github.com/tomgelmers/stack

Answer 1

Checking your Code on Github, i would say the problem is that the navigation gets blocked by your AuthGuard.

The AuthGuard is calling the isLoggedIn function of your authService, which checks localstorage for userdata, while the authState subscriber is still writing to the localstorage.

This kind of thing can either work or don't work, it is pretty much luck and how fast the localstorage api works.

I recommend you check in the isLoggedIn function the variable user of your AuthService instead of localstorage. You can check localstorage in case the user variable is undefined.

That should be relatively save, however i don't know what the timing is between the login function returning and the authState subscriber firing. You might want to set the user variable in the login function. the signInWithEmailAndPassword function does return a Promise with Credentials that has a user property on it.

You could change the login function to

async login(email: string, password: string) {
  return this.afAuth.signInWithEmailAndPassword(email, password).then(userData => {
     this.user = userData.user
     return userData
  }
}

And the isLoggedIn function to

get isLoggedIn(): boolean {
   if(this.user) return !!this.user
   const  user  =  JSON.parse(localStorage.getItem('user'));
   return  user  !==  null;
}

Oh and for completions sake, you should probably set the user variable to undefined or null in your logout function. Even if the user logs out, the user data still hangs around in memory