当它不应该运行时，角护罩就会运行。

Question

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

在某些路由上，不应该对用户进行身份验证，因此没有警卫。这很好用。

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

当描述authguard时，角色保护就会运行。

在我的路线上：/fetch-data只指定了作者，但角色守卫也在运行。

这是我的守卫和模块：

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
        }
      });
    }
  }
}

roles.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);
}
}

app.module.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页面。