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“所有用户”进行保护，一个使用“用户”进行保护，一个使用“团队”进行保护，依此类推。

拥有：

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

配置Route Guard

1 个答案: