配置路由保护

Question

我有一个需要配置的路由保护。在某些路线上，我们想检查我们的user client 是否准备好，在其他一些路线上，我们想检查我们的team client 是否准备好等等。

我的路线守卫看起来像这样

@Injectable({
    providedIn: 'root'
})
export class ClientReadyGuard implements CanActivate, CanActivateChild {
    constructor(
        private clientName: string,
        private router: Router ,        
        private apolloState: ApolloStateService,

    ) {
        debugger;
    }

    canActivate(...) {
       // do things with clientName
    }

从这个守卫我想要多个守卫：一个用clientName'all-users'保护，一个用'user'保护，一个用'team'保护，等等。

拥有：

canActivate: [
   AllUserClientReadyGuard,
   UserClientReadyGuard,
   TeamClientReadyGuard,

]

为此，我尝试了注入令牌，但没有成功； (NullInjectorError: No provider for InjectionToken router token!)。

export const ROUTER_TOKEN = new InjectionToken<Router>('router token');
export const APOLLO_STATE_TOKEN = new InjectionToken<ApolloStateService>('apollo state token');


export const UserClientReadyGuard = new InjectionToken<ClientReadyGuard>(
    'user client ready guard',
    {
        providedIn: 'root', factory: () => new ClientReadyGuard(
            USER_CLIENT,
            inject(ROUTER_TOKEN),
            inject(APOLLO_STATE_TOKEN),
        )
    }
);

Answer 1

我最终使用了继承。不过，从路由器使用{ data } 通常可以说是一个更好的选择。但是由于我最终需要扩展警卫的不同行为，因此我可以覆盖方法。我想这取决于大小写。

export abstract class ClientReadyGuard implements CanActivate, CanActivateChild {

    constructor(
        protected router: Router,
        protected apolloState: ApolloStateService,
        protected client: string
    ) { }

    canActivate(route: ActivatedRouteSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        return this.checkReady(this.client);
    }


    protected checkReady(client: string): Observable<boolean> {
        //...
    }    
}

@Injectable({
    providedIn: 'root'
})
export class GlobalDataClientReadyGuard extends ClientReadyGuard {
    constructor(
        protected router: Router,
        protected apolloState: ApolloStateService,
    ) {
        super(router, apolloState, GLOBAL_DATA_CLIENT);
    }
}