Question

我有一个带有登录方法的user.service.ts文件：

   login(userName : string, password : string) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http
      .post(
      this.baseUrl + '/auth/login',
      JSON.stringify({ userName, password }),{ headers }
      )
      .map(res => res.json())
      .map(res => {
        localStorage.setItem('auth_token', res.auth_token);
        this.loggedIn = true;
        this._authNavStatusSource.next(true);
        return true;
      })
      .catch(this.handleError);
  }

我的login-form.component.ts上的登录按钮调用了它：

login({ value, valid }: { value: Credentials, valid: boolean }) {
    this.submitted = true;
    this.isRequesting = true;
    this.errors='';
    if (valid) {
      this.userService.login(value.email, value.password)
      .finally( () =>
        this.isRequesting = false
      )
        .subscribe(
        result => {
          if (result) {
            console.log("calling routing navigate");
             this.router.navigate(['/connect']);
             console.log(this.userService.isLoggedIn())
             console.log("done");
          }
        },
        error => this.errors = error);
    }
  }
}

当某人点击使用有效凭据登录时，会在本地存储上创建auth_token，而在控制台中我可以看到以下结果：

    console.log("calling routing navigate");
     this.router.navigate(['/connect']);
     console.log(this.userService.isLoggedIn())
     console.log("done");

它是：

calling routing navigate
true
done

但页面上没有任何反应。登录页面保持不变，用户不会被路由到/ connect页面，导航栏上的Login按钮继续（即使它等于！isLogged）。

然后，我按F5，一切顺利。你对导致这种行为的原因有什么看法吗？

我的app.module.ts：

    const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'register', component: RegistrationFormComponent },
    { path: 'login', component: LoginFormComponent },
    { path: 'logout', component: LogoutComponent},
    { path: 'connect', component: ConnectorComponent, canActivate: [AuthGuard]},
    { path: '**', redirectTo: 'home' }
]
@NgModule({
    declarations: [
        AppComponent,
        LoginFormComponent,
        LogoutComponent,
        ConnectorComponent,
        HomeComponent
    ],
    providers: [AuthGuard, ConfigService, UserService, AuthModule],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        DashboardModule,
        AuthModule,
        RouterModule.forRoot(appRoutes)
    ]
})

Answer 1

问题解决了。问题不在路由中，而是在 BehaviorSubject 。

中

当我被路由到 / connect 时，Angular将我路由回 / login ，因为它未检测到已登录。

这是因为我提供了两次 UserService ，因此，我正在寻找我的 BehaviorSubject 的第二个实例，导致此错误。

谢谢大家的帮助。

Angular 4路由/状态问题

1 个答案: