Question

我遇到了Angular路由问题，似乎没有多大意义。通过以下设置，此结果会发生...

应用程序在路径/上加载
授权保护运行
由于存储中还没有JWT，Auth Guard返回false
重定向到/login可以正常工作。

但是...

直接导航至/activate（在“帐户”模块中进行路由）
控制台记录正在运行身份验证防护（不应该发生）
已重定向到/login

我正在努力理解为什么不在/activate路由中的auth Guard不是仪表板布局的子代时运行。

应用路线

 {
    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 }

Auth Guard

@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)
    );
  }
}

应用模块

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

其他信息

仅在生产模式下运行时会发生这种情况。

Augury报告/login和/activate都是/路线的兄弟姐妹。 https://imgur.com/a/CJyKu8C

@angular/core: 8.2.6

@angular/router: 8.2.6

Answer 1

实际上，我认为，您遇到的问题的线索如下：

您添加了记帐模块fisrt的路由，并且当然在该模块中将其标记为forChild。然后，您添加了主AppModuleRouts。编译并运行您的应用程序之后-etire RouterTree包含所有可能的路径。这样，来自AccountModule的路由实际上变成了子路由。因此，就您在空路由上应用canActivate：[AuthGuard]而言-这可能是最普遍的-每次都会触发。

Answer 2

此问题实际上是由我在定义其初始状态的ngrx-router实现中引起的。

最初的初始状态是通过以下建议的方式设置的-https://github.com/ngrx/platform/issues/835#issuecomment-369592809

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

这不适用于生产版本。例如，直接导航到/activate之类的路线会导致路由器状态和路由器角度状态出现差异，从而取消导航。

设置路由器初始状态的正确方法如下...

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

在initialNavigation: 'enabled'中使用app-routing.module时，路由器状态会尽早更新，并与角度路由器同步。

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

2 个答案: