Question

import { ViewContainerRef, ComponentFactoryResolver, Directive, ResolvedReflectiveProvider} from '@angular/core';
import { Router, RouterOutlet, ActivatedRoute, RouterOutletMap } from '@angular/router';

@Directive({
    selector: 'router-outlet'
})
export class ApplicationRouter extends RouterOutlet {
    publicRoutes: Array;
    private parentRouter: Router;
    private router: Router;

    constructor(parentOutletMap: RouterOutletMap, location:ViewContainerRef, componentFactoryResolver: ComponentFactoryResolver, name: string) {
        super(parentOutletMap, location, componentFactoryResolver, name);
        this.router = _parentRouter;
    }

    activate(activatedRoute: ActivatedRoute, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap) {
        debugger;
       // return super.activate(instruction);
    }

}

我不知道要实例化的超类的类型，目的是将授权转移到路由器级别。

Answer 1

您是否有兴趣因特定原因扩展RouterOutlet或仅为路由添加身份验证层？对于后者，只需将您的auth类从“extends RouterOutlet”更改为“implements CanActivate”。

“AuthenticationGuard”实施的一个例子：

import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    if (this.authService.isLoggedIn) { return true; }
    this.router.navigate(['/login']);
    return false;
  }
}

然后在您的路线文件中将“CanActivate”属性添加到您想要访问控制层的路线：

//route file
...
{
  path: 'admin',
  component: CrisisAdminComponent,
  canActivate: [AuthGuard]
},
...

这很简单。

来自angular docs router guards session

Answer 2

Angular升级到RC4后我遇到了同样的问题。其中一个应用程序组件正在扩展RouterOutlet

RouterOutlet 随着时间的推移发生了很大变化，为了使您的ApplicationRouter类工作，您需要通过实现CanActivate接口来使用路由器保护。

请检查我的回答here并阅读有关路由器保护的更多信息，请参阅this。

我希望这有帮助！

如何在角度2 rc4中扩展routerOutlet

2 个答案: