Question

问题似乎很奇怪。角度5应用程序正在使用firebase身份验证和ngrx。默认路由是一个名为HomeLayout的组件，在app模块中声明。我有另一个名为Userlist和Settings的模块。它们在app.routing中加载了延迟。问题是，当我点击登录时，firebase返回auth信息，我将登录状态更新为AppStore.And有一个AuthService，这是订阅存储。应用程序工作正常，没有使用AuthenticatedGuard进行更改检测没有问题。当我使用AuthenticatedGuard时，初始路由ngModel，ngClass项目不会按预期工作。如果我使用routerlink导航到其他路由。然后，如果我返回到初始重定向页面（在我们的用例列表中），事情将正常工作。

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { HomeLayoutComponent } from './containers/home-layout/home-layout.component';
import { LoginComponent } from './components/login/login.component';
import { SignupComponent } from './components/signup/signup.component';
import { AuthenticatedGuard } from './core/guards/authenticated.guard';
import { UnauthenticatedGuard } from './core/guards/unauthenticated.guard';
const appRoutes: Routes = [
      { path: '', redirectTo: 'userlist', pathMatch: 'full'},
      { path: '', component: HomeLayoutComponent, canActivate: [AuthenticatedGuard],
        children: [
          {
            path: 'userlist',
            loadChildren: 'app/containers/userlist/userlist.module#UserlistModule'
          },
          {
            path: 'settings',
            loadChildren: 'app/containers/settings/settings.module#SettingsModule'
          }
        ]
      },
      { path: 'login', component: LoginComponent, canActivate: [UnauthenticatedGuard]},
      { path: 'signup', component: SignupComponent },
      { path: 'unavaliable', component: NotFoundComponent },
      // otherwise redirect to home
      { path: '**', redirectTo: 'unavaliable' }
  ];



export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes, { enableTracing: true });

auth.effect.ts

@Effect()
    googleloginAction$: Observable<Action> = this.actions$
        .ofType(authActions.AuthActionTypes.GOOGLE_LOGIN_REQUESTED)
        .map(action => action)
        .switchMap((payload: any) => this.authService.googleLogin()
        .map(res => (new authActions.GoogleLoginSuccessAction(new authActions.AuthUserPayload(res))))
            .do(() => this.router.navigate(['/userlist']))
            .catch((error) => Observable.of(new authActions.AuthErrorAction({error: error})))
    );

AuthGuard服务

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { AppState, isLoggedIn } from '../../reducers';


@Injectable()
export class AuthGuard {
    constructor(private store: Store<AppState>) {}
    isLoggedIn(): Observable<boolean> {
        return this.store.select(isLoggedIn).do(x => console.log('User Logged:', x) );
    }
}

AuthenticatedGuard

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRoute, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import 'rxjs/add/operator/do';

@Injectable()
export class AuthenticatedGuard implements CanActivate {
  constructor(private authGuard: AuthGuard,
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }
  canActivate(): Observable < boolean > {
    return this.authGuard.isLoggedIn().map(loggedIn => {
      if (!loggedIn) {
        this.router.navigate(['/login'], {
          relativeTo: this.activatedRoute
        });
        return false;
      }
      return true;
    });
  }

}

同样，我还有一个应用于Login.So的防护，如果登录它将重定向到用户列表路由。我怀疑是router.navigate方法或auth警卫的任何问题，因为路由器链接导航按预期工作。

Answer 1

问题是由于角度路由器lib中的错误。使用ngZone修复。 this.ngZone.run(() => this.router.navigateByUrl('/waitlist'))

更改检测未在初始延迟加载路由上拾取嵌套路由组件更改

1 个答案: