2

我使用這樣的代碼來擴展RouterOutlet和創建應用廣泛的認證和路由保護LoggedInOutlet angular2認證 - 路由器v3.0.0-alpha8 - ComponentInstruction在哪裏?

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

問題是,ComponentInstruction不會在新的V3.0.0-alpha8路由器存在,而超級方法簽名已經改變。我如何更新這個在新的路由器中工作?我無法找到任何解釋這些更改的文檔。

回答

3

ComponentInstruction已被棄用。在當前的Angular2的RC4版本中,這個類已經在reouter-deprecated下列出。隨着RC5的進入,這個軟件包將被丟棄。

RouterOutlet隨着時間的推移發生了很大的變化,爲了讓您的課程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] } 

我希望這有助於!

+1

參見https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard –