LoggedInOutlet angular2 身份验证 - 路由器 v3.0.0-alpha8 - ComponentInstruction 在哪里？

Question

我正在使用这样的代码来扩展 RouterOutlet 并创建应用范围的身份验证和路由保护

import {Directive, Attribute, ViewContainerRef, DynamicComponentLoader} from '@angular/core';
import {Router, ComponentInstruction} from '@angular/router';
import {Router} from '@angular/router';
import {RouterOutletMap} from '@angular/router/src/router_outlet_map';
import {RouterOutlet} from '@angular/router/src/directives/router_outlet';

import {Authentication} from '../common/authentication.service';

@Directive({
  selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
  publicRoutes:any;
  isAuthenticated:boolean;
  //private router: any;

  constructor(public _elementRef: ElementRef, public _loader: DynamicComponentLoader,
              public _parentRouter: Router, @Attribute('name') nameAttr: string, public authService:Authentication) {
    super(_elementRef, _loader, _parentRouter, nameAttr);
    this.isAuthenticated = authService.isLoggedIn();


    //this.router = _parentRouter;
    /**
     * DEFINE PUBLIC ROUTES
     *
     * The Boolean following each route below denotes whether the route requires authentication to view.
     *
     * Format: key/value pair
     * - key is the /route url "/login", "/signup", etc
     * - value is a boolean true/false
     *    `true` means it's a publicly available route. No authentication required
     *    `false` means it's a protected route which is hidden until user is authenticated
     *
     */
    this.publicRoutes = {
      'login': true,
      'signup': true,
      '404': true
    };
  } // end constructor

  routeIsActive(routePath:string) {
    return this.router.url == routePath;
  }

  activate(instruction: ComponentInstruction) {
    // let url = instruction.urlPath;
    let url = this.router.url;
    // If the url doesn't match publicRoutes and they are not authenticated...
    if (!this.publicRoutes[url] && !this.isAuthenticated) {
      // todo: redirect to Login, may be there a better way?
      this.router.navigateByUrl('/login');
    }
    return super.activate(instruction);
  }
}

问题是新的 v3.0.0-alpha8 路由器中不存在 ComponentInstruction，并且超级方法签名已更改。我如何更新它以在新路由器中工作？我找不到任何解释更改的文档。

Answer 1

因为在新路由器中，它使用CanActivate

Answer 2

ComponentInstruction 已弃用。在当前的 Angular2 RC4 版本中，此 class 已被列在 reouter-deprecated 下。随着 RC5 的到来，这个包将被删除。

RouterOutlet 随着时间的推移发生了很大变化，要让您的 class LoggedInRouterOultet 正常工作，您必须使用 CanActivate 接口。

你可以这样做：

有一个像 LoggedInActivator 这样的可注入服务：

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LogInService } from './login.service';

@Injectable()
export class LoggedInActivator implements CanActivate {
  constructor(private loginService: LogInService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

在定义路由时添加canActivate并将其映射到组件上的LoggedInActivator：

{ path: 'home', component: HomeComponent, canActivate: [LoggedInActivator] }

希望对您有所帮助！

LoggedInOutlet angular2 身份验证 - 路由器 v3.0.0-alpha8 - ComponentInstruction 在哪里？

LoggedInOutlet angular2 authentication - Router v3.0.0-alpha8 - Where is ComponentInstruction?

authentication

angular2-routing

angular2-router

angular2-router3

angular