角度保护在不应该运行的时候运行

Question

我有一个Angular应用程序，它有两个保护。第一个是确保用户经过身份验证，第二个是检查用户角色。

在某些路由上，用户不应该经过身份验证，因此没有保护。这很好用。

在其他路由上，用户应该经过身份验证，但每个角色都应该能够访问它。所以我只使用authguard。在其他路由上，只有管理员才能访问该路由。这就是问题所在。

角色保护在描述authguard时运行。

例如：在我的路由：/fetch-data上，只指定了authguard，但roleguard也运行。

这是我的警卫和模块：

authorize.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthorizeService } from './authorize.service';
import { tap } from 'rxjs/operators';
import { ApplicationPaths, QueryParameterNames } from './api-authorization.constants';
@Injectable({
providedIn: 'root'
})
export class AuthorizeGuard implements CanActivate {
constructor(private authorize: AuthorizeService, private router: Router) {
}
canActivate(
_next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.authorize.isAuthenticated()
.pipe(tap(isAuthenticated => this.handleAuthorization(isAuthenticated, state)));
}
private handleAuthorization(isAuthenticated: boolean, state: RouterStateSnapshot) {
if (!isAuthenticated) {
this.router.navigate(ApplicationPaths.LoginPathComponents, {
queryParams: {
[QueryParameterNames.ReturnUrl]: state.url
}
});
}
}
}

角色.guard.ts

import { RoleService } from './role.service';
import { HttpClient } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AdminGuard implements CanActivate {
constructor(private _roleService: RoleService) {
}
canActivate(
_next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this._roleService.checkRole('Administrator', _next);
}
}

应用程序模块.ts

import { RoleService } from './../api-authorization/role.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
// material ui imports
[...]
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { WebshopComponent } from './webshop/webshop.component';
import { WebshopitemComponent } from './webshop/webshopitem/webshopitem.component';
import { KlassiekersComponent } from './klassiekers/klassiekers.component';
import { WijnenComponent } from './wijnen/wijnen.component';
// component imports
[...]
import { AdminGuard } from 'src/api-authorization/Roles.guard';

export function tokenGetter(){
return localStorage.getItem("token");
}
@NgModule({
declarations: [               
AppComponent,
NavMenuComponent,
HomeComponent,
// Component imports
[...]
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ApiAuthorizationModule,
ReactiveFormsModule,
// Material ui modules
[...]
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'webshop', component: WebshopComponent },
{ path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] },
{ path: 'klassiekers', component: KlassiekersComponent},
{ path: 'shoppingcart', component: ShoppingcartComponent},
{ path: 'orders', component: OrderComponent, canActivate: [AuthorizeGuard] },
{ path: 'bevestiging/:UserId', component: BevestigingComponent, canActivate: [AuthorizeGuard]},
{ path: 'admin', canActivate: [AuthorizeGuard, AdminGuard], children: [
{ path: 'wijnen', component: WijnenComponent },
{ path: 'wijnen/insert', component: WijnenInsertComponent },
{ path: 'wijnen/update/:id', component: EditWijnenComponent },
]},
{ path: 'profile', canActivate: [AuthorizeGuard], children: [
{ path: 'orders', canActivate: [AdminGuard], component: OrdersComponent },
]}
]),
BrowserAnimationsModule
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true },
RoleService
],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

是的，那是因为父级具有保护。

Angular需要检查您是否可以访问profile页面，然后检查您是否能够访问orders页面。