this.router.navigate 在 Guard 中，将来会阻止路由

Question

我在 Angular 4 中设置了两个守卫 -- 一个在用户尝试到达受保护的路由时将用户重定向到登录页面，另一个将用户从 [=30 重定向到欢迎页面=] 如果他们还没有去过那里。

守卫本身工作得很好......但我注意到一些非常奇怪的行为。通过 this.router.navigate 在 WelcomeTraveler 守卫中添加重定向使应用程序处于无法从 first 守卫访问受保护路由的状态，即使在登录后也是如此。我只是保持被送回主页。

这是我的守卫：

export class AuthGuardLoggedInUser implements CanActivate {
  private isLoggedIn: boolean;
  private working: boolean;
  constructor (@Inject(Store) private _store:Store<AppStore>, @Inject(Router) private _router: Router) 
  {
    _store.select(state => state.AuthNState).subscribe(auth =>
    {
      this.isLoggedIn = auth.connected
      this.working = auth.working
    })
  }
  canActivate() {
    if (this.working)
    {
      let promise: Promise<boolean>  = new Promise((resolve, reject) => {
        let sub = this._store.select(state => state.AuthNState).subscribe(auth =>
        {
          if (!auth.working) {
            resolve(auth.connected)
            sub.unsubscribe()
            if (!auth.connected) this._router.navigate(['/i/login']);
          }
        })
      });
      return promise
    }
    else if (this.isLoggedIn){
      return true
    }
    else {
      this._router.navigate(['/i/login']);
    }

export class WelcomeTraveler implements CanActivate {
  private hasAlreadyVisitedWelcomePage: boolean;
  private isLoggedIn: boolean;
  private working: boolean;
  constructor (@Inject(Store) private _store:Store<AppStore>, @Inject(Router) private _router: Router) 
  {
    _store.select(state => state.AuthNState).subscribe(auth =>
    {
      this.isLoggedIn = auth.connected
      this.working = auth.working
    })
  }
  canActivate() {
    if (this.working)
    {
      let promise: Promise<boolean> = new Promise((resolve, reject) => {
        let sub = this._store.select(state => state.AuthNState).subscribe(auth =>
        {
          if (!auth.working) {
            resolve(auth.connected)
            sub.unsubscribe()
            this.hasAlreadyVisitedWelcomePage = true
            this._router.navigate(['/i/welcome']);
          }
        })
      });
      return promise
    }
    else if (this.isLoggedIn){
      return true
    }
    else if (!this.hasAlreadyVisitedWelcomePage){
      this.hasAlreadyVisitedWelcomePage = true
      this._router.navigate(['/i/welcome']);
    }
    else return true
  }
}

这是路由的片段 table:

export var AppRoutes = RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent,
    canActivate: [WelcomeTraveler]
  }, {
    path: 'i/getstarted',
    component: GetStartedPageComponent,
    canActivate: [AuthGuardLoggedInUser]
  }, {
    path: 'i/login',
    component: LoginPageComponent
  }, {
    path: 'i/profile',
    component: ProfilePageComponent,
    canActivate: [AuthGuardLoggedInUser]
  }, {
    path: 'i/welcome',
    component: WelcomePageComponent
  }])

this.router.navigate 在 WelcomeTraveler 守卫中的存在似乎导致了问题，即使这些线从未被击中！登录后，我在尝试路由到个人资料（成功通过第一个守卫之后）后立即被送回 'Home'。如果我删除导航线 - 问题就会消失。

有什么想法吗？

Answer 1

正如经常发生的那样，我走错了路。对于那些可能已加注星标或对此投赞成票的人，我建议您检查您可能拥有的任何调用 router.navigate 的订阅——就我而言，我未能在我的 [=16 上清理这些订阅=] 组件...所以一旦订阅被初始化，任何时候状态更新我都会被重定向到主页。

固定如下：

export class LoginPageComponent implements OnDestroy {
   private _redirectSubscription: Subscription;
   constructor (private _store:Store<AppStore>, private router: Router) {
      this._redirectSubscription = _store.select((state) => state.AuthNState).subscribe((auth) =>
      {
        if (auth.connected) this.router.navigate(['']);
      })
   }

   ngOnDestroy() {
     //Called once, before the instance is destroyed.
     //Add 'implements OnDestroy' to the class.
     this._redirectSubscription.unsubscribe();
   }
}

this.router.navigate 在 Guard 中，将来会阻止路由

this.router.navigate in Guard blocks routes in future

angular

angular-router

angular-router-guards