1

我有一个需要配置的路由保护。在某些路线上，我们想检查我们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),
        )
    }
);
4

1 回答 1

0

我最终使用了继承。不过，从路由器使用{ 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);
    }
}
于 2018-08-29T20:08:13.913 回答