Question

我正在尝试使用authguard，并且想要在URL无效的情况下导航到/notfound URL。这是我的authguard：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        const self = this;
        const userId= route.params.id;
        if(!userId){
            return false;
        }
        else{
            return from(this.authservice.httpUnauthorizedGet("/api/Users/isUserValid/" + userId)).pipe(
                map((data) => {
                    const dataUpdated: any = data;
                    if (dataUpdated.allowed === false) {
                        self.router.navigate(['/notfound']);
                        return false;
                    }
                    return dataUpdated.allowed;
                }),
                catchError(() => {
                    self.router.navigate(['/notfound']);
                    return of(false);
                }),
              );
        }
    }

这是可行的，但是在URL无效的情况下（例如：/users/1234），它首先导航到基本URL（http://localhost:4200），然后导航到http://localhost:4200/notfound。当我在/notfound上并单击时，而不是导航到/users/1234时，我导航到baseurl。

我认为这是由于return false而引起的。这导致导航到基本URL，然后router.navigate导航到/notfound。

有什么办法，我可以直接导航到/notfound而不是转到基本URL吗？

Answer 1

我不是将404导航逻辑放在AuthenticationGuard.ts中，而是让app.routing.ts处理它。您能否请检查以下代码并在适用的情况下相应地应用它。对于您的信息，我正在使用的authService为ADAL，但这不相关。

authentication.guard.ts

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      if (this.authService.isLogged) {
        return true;
      } else {
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return false;
      }
  }

canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    return this.canActivate(childRoute, state);
}

app.routing.ts

const routes: Route[] = [
    { path: 'login', component: LoginComponent },
    { path: 'logout', component: LogoutComponent },
    { 
        path: '', component: MainComponent, canActivate: [ AuthenticationGuard ], 
        canActivateChild: [ AuthenticationGuard ], children: [
            { path: '', component: MyOwnComponent },
            { path: 'foo', component: FooComponent },
            { path: '**', component: NotFoundComponent }
        ]
    }
]

export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes)

下面的行是处理404的路由。

{ path: '**', component: NotFoundComponent }

如果网址无效，则Auth Guard导航到基本网址

1 个答案: