时间戳

首页 > 解决方案 > Auth Guard 在无效 url 的情况下导航到基本 url

angular - Auth Guard 在无效 url 的情况下导航到基本 url

问题描述

如果 url 无效，我正在尝试使用authguard并希望导航到/notfoundurl。这是我的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而不是去基本网址？

标签： angular

解决方案

我没有将 404 导航逻辑放入AuthenticationGuard.ts，而是让其app.routing.ts处理。您能否查看以下代码并在适合您的情况下相应地应用它。为了您的信息，我使用的 authService 是 ADAL，但这不应该是相关的。

身份验证.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 }

推荐阅读