路由器保护问题？答案

【问题标题】：Router Guard Issue?路由器保护问题？
【发布时间】：2020-04-03 23:51:12
【问题描述】：

我正面临一种情况。我有一个 CanActivate 路由器保护装置。使用守卫会导致整个页面不必要的重新加载。

我实现了两个版本的守卫，发现了一些我不明白的地方。任何人都可以解释这种行为并提出解决方案吗？这是路由：

const routes: Routes = [{
  path: '',
  component: DashboardComponent,
  children: [{
      path: 'overview',
      component: OverviewComponent,
    },
    {
      path: 'profile',
      canActivate: [TestGuard],
      component: ProfileComponent,
    },
  ],
}, ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class MyRoutingModule {}

Guard 版本 1（按预期工作）：

import {
  Injectable
} from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
} from '@angular/router';
import {
  Observable,
  of
} from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class TestGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable < boolean > {
    return of(true);
  }
}

Guard 版本 2（重新加载整个页面）：

import {
  Injectable
} from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  RouterStateSnapshot,
} from '@angular/router';
import {
  Observable,
  of
} from 'rxjs';
import {
  delay,
  map
} from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class TestGuard implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable < boolean > {
    return of(true).pipe(
      delay(5000),
      map(answer => answer)
    );
  }
}

我的问题是我需要调用服务（API 请求）。它是通过第二个示例中的延迟来模拟的。但在这种情况下，它会导致整个页面的重新加载。我没有看到什么？

【问题讨论】：

这里是 github 的链接。它看起来像一个错误。 github.com/angular/angular/issues/32819#issuecomment-538465250

标签： angular router guard angular-router-guards

【解决方案1】：

最后，这不是问题。它应该工作。问题出在我们项目的某个地方。

它在某种程度上与延迟加载的模块有关。该问题已通过使用 ngxs 并从状态中读取所需信息得到解决。

【讨论】：