为什么 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] }
];

auth 模块路由：

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 正在调用您的 authService 的 isLoggedIn 函数，该函数检查本地存储中的用户数据，而 authState 订阅者仍在写入本地存储。

这种东西可以工作也可以不工作，这完全取决于运气和本地存储 api 工作的速度。

我建议您在 isLoggedIn 函数中检查 AuthService 的变量用户而不是 localstorage。如果用户变量未定义，您可以检查 localstorage。

那应该相对节省，但是我不知道登录功能 returning 和 authState 订阅者触发之间的时间安排。您可能希望在登录函数中设置用户变量。 signInWithEmailAndPassword 函数执行 return 一个 Promise with Credentials，上面有一个用户属性。

您可以将登录功能更改为

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

哦，为了完成，您可能应该在注销函数中将用户变量设置为未定义或 null。即使用户注销，用户数据仍然在内存中徘徊

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

Why is Angular router.navigate() not navigating?

javascript

angular

typescript

routing