代码之家 › 专栏 › 技术社区 › Stephane

角度应用中的一个无限重定向循环

angular

Stephane · 技术社区 · 6 年前

我正在做一个角度应用程序,其路由如下:

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isAuthenticated()
    .pipe(
      map(isAuthenticated => {
        if (!isAuthenticated) {
          this.authService.setPostLoginRedirectUrl(state.url);
          this.router.navigate(['login']);
          return false;
        } else {
          return true;
        }
      }),
      catchError((error, caught) => {
        return of(false);
      })
    );
  }

以及以下路线:

const routes: Routes = [
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  },
  {
    path: '',
    component: HomeLayoutComponent,
    canActivateChild: [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
      },
    ]
  },
];

2 回复 | 直到 6 年前

SiddAjmera 6 年前

redirectTo 值应该始终有前导 / 因为它表示用户应该导航到的实际路由。

redirectTo: 'login', 到 redirectTo: '/login', 在你的路由配置中

此外,这:

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

应该是

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

Avin Kavish 6 年前

我对调试没有什么建议。试着把它表达成:

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

看看是否是路由重定向。

试着用,

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

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

Steve Lam 5 年前

对于我的问题,导入顺序会影响这个错误。

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

Marian Turchyn 4 年前

{ path:'登录', 组件:LoginFormComponent, canActivate:[AuthGuard], }