Почему Angular router.navigate () не перемещается?

Question

Я создаю аутентификацию в angular. При входе в систему пользователь должен быть перенаправлен. Моя проблема в том, что функция router.navigate (), похоже, не работает ... Это код, который не работает:

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;
   }
 );
}

console.log действительно показывает, когда вход в систему успешен, но он не будет переходить к маршруту chore / show.

маршруты приложения:

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] }
];

маршруты модуля авторизации:

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

и маршрутизация модуля работы:

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

Почему-то я не могу заставить его перенаправить после входа в систему. Какие-либо предложения? РЕДАКТИРОВАТЬ: Добавлены маршруты приложений. Код на https://github.com/tomgelmers/stack

Answer 1

Проверяя ваш код на Github, я бы сказал, что проблема в том, что навигация заблокирована вашим AuthGuard.

AuthGuard вызывает функцию isLoggedIn вашего authService, который проверяет локальное хранилище для пользовательских данных, в то время как подписчик authState все еще пишет в локальное хранилище.

Такого рода вещи могут либо работать, либо не работать, это большая удача и скорость работы API-интерфейса localalstorage.

Я рекомендую вам проверить в функции isLoggedIn переменную user вашего AuthService вместо localstorage. Вы можете проверить localalstorage, если переменная пользователя не определена.

Это должно быть относительно экономно, однако я не знаю, каково время между возвратом функции входа в систему и срабатыванием подписчика authState. Возможно, вы захотите установить переменную пользователя в функции входа в систему. функция signInWithEmailAndPassword возвращает Promise с учетными данными, в котором есть свойство пользователя.

Вы можете изменить функцию входа в систему на

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

, а функцию isLoggedIn - на

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

О, и для завершения вам, вероятно, следует установить переменную пользователя на undefined или null в функции выхода из системы. Даже если пользователь выходит из системы, пользовательские данные все еще находятся в памяти