是否可以在指令中注入 angular 2 路由器

Question

我想在扩展 RouterOutlet 的指令中注入 angular 2 路由器，我使用它而不是传统的出口来进行身份验证流程

@Directive({
    selector: 'router-outlet'
})
export class APPLICATION_ROUTER_DIRECTIVE extends RouterOutlet {
    constructor(parentOutletMap:RouterOutletMap, location:ViewContainerRef, componentFactoryResolver:ComponentFactoryResolver, name:string) {
        super(parentOutletMap, location, componentFactoryResolver, name);
    }

    activate(activatedRoute:ActivatedRoute, providers, outletMap) {
        let requiredUserRoles = activatedRoute.snapshot['_routeConfig'] ? activatedRoute.snapshot['_routeConfig'].roles : null;
        if (this.authorizeRoute(requiredUserRoles)) {
            return super.activate(activatedRoute, providers, outletMap);
        }
        else {
            let activeUserRole = AuthorizationService.getUserRole();
            switch (activeUserRole) {
                case null:
                case Role.ANONYMUS:
                case Role.USER: {
                    window.location.href = '/#';
                    break;
                }
                case Role.ADMIN: {
                    window.location.href = '/#/admin/users';
                    break;
                }
            }
        }
    }

    authorizeRoute(requiredRoles:Array<string>):boolean {
        let authorized = false;
        let activeUserRole = AuthorizationService.getUserRole();

        if (!requiredRoles) {
            requiredRoles = [Role.ANONYMUS, Role.USER];
        }

        if (!activeUserRole) {
            activeUserRole = Role.ANONYMUS;
        }

        return requiredRoles.indexOf(activeUserRole) !== -1;
    }

}

如果我注入的路由器未定义，我希望从 switch case 导航到正确的页面，这些页面是用户/管理员的默认页面

Answer 1

您想要使用身份验证的路由。没有注入和指令组件并不真正关心（或知道）路由。

查看名为“Route Guards”的部分和 CanActivate 功能 https://angular.io/docs/ts/latest/guide/router.html

但更大的问题是，“你能在客户端 JS 中授权吗？”不，不是。您可能需要考虑如何移动授权服务器端以使其真正安全。