Question

我正在使用以下路由执行Angular应用程序：

Site B

如果我没有登录，并且请求任何安全的URL，例如always-on availability group或const routes: Routes = [ { path: '', component: LoginLayoutComponent, children: [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', component: LoginComponent } ] }, { path: '', component: HomeLayoutComponent, canActivate: [AuthGuardService], children: [ { path: 'users', component: UsersComponent, }, { path: 'detail/:id', component: UserComponent, }, { path: 'dashboard', component: DashboardComponent, data: { expectedRole: 'admin' } }, { path: 'home', loadChildren: './views/home/home.module#HomeModule', data: { preload: true, delay: false } }, { path: 'error', component: ErrorComponent }, ] }, ];，则存在到http://localhost:4200/users的重定向，并且应用程序进入无限环。如果我已登录，则可以正常工作。

浏览器控制台显示以下消息http://localhost:4200/dashboard。

这是我的http://localhost:4200/服务：

Navigation triggered outside Angular zone

我在auth guard

编辑：现在，可以使用以下身份验证防护解决问题：

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const expectedRole = route.data.expectedRole ? route.data.expectedRole : null;
    const tokenPayload = this.tokenService.getDecodedAccessToken();
    return this.authService.isAuthenticated()
    .pipe(
      map(isAuth => {
        if (!isAuth) {
          this.router.navigate(['login']);
          return false;
        } else {
          return true;
        }
      }),
      catchError((error, caught) => {
        return of(false);
      })
    );
  }

  canLoad(): Observable<boolean> {
    if (this.authService.isAuthenticated()) {
      return of(true);
    } else {
      return of(false);
    }
  }

以及以下路线：

Angular 7

Answer 1

编辑：找出罪魁祸首！在 app.module.ts 中，您需要先导入 AuthModule。这样做将允许您在“auth-routing.module.ts”或“app-routing.module.ts”中使用路径“**”

@NgModule({

  imports: [
    AuthModule,
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    SharedModule
  ],
})

我也遇到了无限循环问题。不确定这是否与您的有关，但对我而言，我有两个路由文件。 “app-routing.module.ts”和“auth-routing.module.ts”。我将下面的代码从“app-routing.module.ts”移动到“auth-routing.module.ts”，不再有无限循环！希望这对您有所帮助！

 {
    path: '**',
    redirectTo: 'my-route',
  }

Answer 2

for (k = 0; k <= 9; k++) { printf("%d", javariparker[k]); } }值应始终带有前导redirectTo，因为它代表用户应导航到的实际路线。

在路由配置中将/更改为redirectTo: 'login',

另外，这个：

redirectTo: '/login',

应该是

this.router.navigate(['login']);

Answer 3

我没有给您确切的意见，仅提供一些调试建议。尝试将其表示为：

shopt -s failglob

查看是否是路由重定向。

尝试将其替换为

const routes: Routes = [
{
  path: '',
  component: LoginLayoutComponent,
  children: [
    {
      path: 'login',
      component: LoginComponent
    },
    {
      path: '',
      component: LoginComponent,
      pathMatch: 'full'
    },
  ]
}

或

this.router.navigateByUrl('/login');

Answer 4

对于我的问题，导入顺序会影响此错误。

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,

    AccountModule, // Load other eager modules first
    AppRoutingModule // Move this AppRouting to the end like this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 5

就我而言（主题类似），当我循环访问时，它是登录路径上的AuthGuard。

{ 路径：“登录”，组件：LoginFormComponent， canActivate：[AuthGuard]， }

要解决此问题，我刚刚从登录路线中删除了警卫。

Angular应用程序中的一个无限重定向循环

5 个答案: