Angular 角度路由器激活错误的路由保护

我在角度布线方面遇到了一些问题，似乎没有多大意义。通过以下设置，会出现这种结果

• 应用程序加载路径

  /

• 授权守卫运行
• Auth guard返回false，因为存储器中还没有JWT
• 重定向到

  /login

  的功能与预期一样

然而

• 直接导航到

  /activate

  （在帐户模块中进行路由）
• 控制台记录正在运行auth guard（这不应该发生）
• 已重定向到

  /login

我很难理解为什么auth-guard运行的是

/activate

路由，而它不是仪表板布局的子级

应用程序路线

 {
    path: '',
    component: DashboardLayoutComponent,
    canActivate: [AuthGuard],
    canActivateChild: [DashboardGuard],
    children: [
      {
        path: 'schedule',
        loadChildren: () =>
          import('@libs/schedule').then(
            i => i.ScheduleModule
          ),
        data: {
          breadcrumb: 'Schedule'
        }
      },
      // Other feature modules omitted
      {
        path: '',
        redirectTo: '/schedule',
        pathMatch: 'full'
      }
    ]
  }

客户路线

  { path: 'login', component: LoginComponent },
  { path: 'activate', component: ActivateComponent }

授权守卫

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private jwtService: JwtService,
    private router: Router,
    private accountService: accountService
  ) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    console.log('Auth Guard Start'); // <-- This appears in console

    return this.jwtService.getToken().pipe(
      map(token => {
        if (!token) {
          this.router.navigate(['/login']);
          return false;
        }
        // Attempt to populate the user using the token.
        this.accountService.populate();
        return true;
      }),
      take(1)
    );
  }
}

补充资料

只有在生产模式下运行时才会发生这种情况

占卜报告说

/login

和

/activate

都是

/

路线的兄弟姐妹

@angular/core:8.2.6

---

@angular/router:8.2.6

事实上，我认为你的问题的线索如下：

首先为记帐模块添加路由，当然在该模块中将它们标记为forChild。 然后，您添加了主AppModuleOuts。 在编译并运行应用程序之后-etire RouterTree包含所有可能的路径。因此，来自AccountModule的路由实际上变成了一个子路由。

---

因此，就您在一条空路由上应用canActivate:[AuthGuard]而言，最常见的可能是，它每次都会触发。

这个问题实际上是由我定义其初始状态的

ngrx路由器

实现引起的

初始状态按照此处建议的以下方式设置：

---

使用

app routing.module

中的

initialNavigation:“已启用”

，路由器状态将在最早的时间点更新，并与角路由器同步。

帐户路由如何连接到主路由？帐户路由将导入帐户模块，已导入到应用程序模块中。这意味着帐户路由是应用程序路由的子级。root只能导入一个路由器。所以我认为这是不正确的。我要说的是，这是在生产模式下运行而不是在开发模式下运行时发生的。以下是占卜如何解释我的路线。您可以看到它们是同级，而不是子级。根节点只能导入一个路由器。帐户是一个功能模块，应该能够处理它的路由，因为我有它的设置。我甚至不想争辩。但是每次你的守卫开火的原因都写在上面。因此，正如@ritaj已经写的那样，你的所有功能模块路由都变成了子级…但不是我的应用程序路由模块中定义的路由的子级。所以这仍然不能回答问题。预兆显示，仪表板、登录和激活都是兄弟姐妹。那么你的建议是什么呢？在你的案例中，最简单的建议是将应用程序路由移动到更低的级别。对于舒尔来说，这可能不是最清晰的，但速度最快。

@NgModule({
  declarations: [AppComponent, DashboardLayoutComponent],
  imports: [
    // .. other modules omitted
    AccountModule,
    AppRoutingModule
  ],
  providers: [AuthGuard, DashboardGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

export const routerInitialState: fromRouter.RouterReducerState<RouterStateUrl> = {
  state: {
    url: window.location.pathname,
    queryParams: getQueryParams(window.location.search.substring(1)),
    params: {}
  },
  navigationId: 0
}

export const routerInitialState: fromRouter.RouterReducerState<RouterStateUrl> = {
  state: {
    url: '/',
    queryParams: {},
    params: {}
  },
  navigationId: 0
}