AppcomponentがAngular2に読み込まれる前のユーザ認証

私はAppcomponentを通じて材料設計Uiを読み込む簡単なアプリケーションを持っています。私は、アプリケーションコンポーネントが読み込まれる前にユーザーを認証する必要があります。AppcomponentがAngular2に読み込まれる前のユーザ認証

import {Component} from 'angular2/core'; 
import {Router, RouteConfig, ROUTER_DIRECTIVES,CanActivate} from 'angular2/router'; 
import {AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS} from 'angular2-jwt'; 


import {HomeComponent} from '../home/HomeComponent' 
import {AboutComponent} from '../about/AboutComponent' 
import {HeaderComponent} from './HeaderComponent' 
import {LoginComponent} from '../login/LoginComponent' 
import {AuthService} from '../../services/AuthService' 
import {SidebarComponent} from './SidebarComponent' 
import {DashboardComponent} from './DashboardComponent' 
import {MDL} from './MaterialDesignLiteUpgradeElement'; 


@RouteConfig([ 
    {path: 'app/home', component: HomeComponent, as: 'Home'}, 
    {path: 'app/dashboard', component: DashboardComponent, as: 'Dashboard'}, 
    {path: 'app/about', component: AboutComponent, as: 'About'},  
    {path: 'app/login', component: LoginComponent, as: 'Login'}, 
    {path: 'app/*', redirectTo: ['Login']} // this redirect is not working for some reason 
]) 
@Component({ 
    selector: 'my-app', 
    /*template: '<router-outlet></router-outlet>',*/ 
    template: ` 
    <body> 
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
     <app-header mdl class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"></app- header> 
     <app-sidebar class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50"> 
     </app-sidebar> 
     <main class="mdl-layout__content mdl-color--grey-100"> 

      <router-outlet></router-outlet> 

     </main> 
    </div> 

    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    </body> 

    `, 
    /*styleUrls: ['../app/assets/styles.css'], */ 
    directives: [ROUTER_DIRECTIVES,SidebarComponent,HeaderComponent,MDL], 
    providers: [AUTH_PROVIDERS,AuthService] 
}) 

export class AppComponent { 

    constructor() {} 

}

Iは

import {Component} from 'angular2/core'; 
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS} from 'angular2-jwt'; 

import {AuthService} from '../../services/AuthService' 



@Component({ 
    selector: 'protected', 
    template: '', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [AUTH_PROVIDERS,AuthService] 
}) 

export class LoginComponent { 

    constructor(private auth: AuthService) { 
     this.auth.login(); 
    } 
    login() { 
    this.auth.login(); 
    } 

    logout() { 
    this.auth.logout(); 
    } 

    static loggedIn() { 
    return tokenNotExpired(); 
    } 

}

ログイン成分がのAuthService

のAuthService

を使用し、次のようにユーザにログインログイン成分を有するが、以下のようにアプリの成分であります

import {Injectable} from 'angular2/core'; 
import {ROUTER_DIRECTIVES, Router} from "angular2/router"; 

declare var Auth0Lock: any; 

@Injectable() 
export class AuthService { 

constructor(private router: Router) {} 


    lock = new Auth0Lock('KEY','URL'); 

    login() { 
    this.lock.show((error: string, profile: Object, id_token: string) => { 
    if (error) { 
     console.log(error); 
     return false; 
    } 

    localStorage.setItem('profile', JSON.stringify(profile)); 
    localStorage.setItem('id_token', id_token); 
    this.router.navigate(['Home']); 

    }); 
} 

logout() { 
    localStorage.removeItem('profile'); 
    localStorage.removeItem('id_token'); 
} 
}

次のように@CanActivateでAppComponentに注釈を付けることを試みました：しかしAppComponentがどのようにロードされても動作していないようです。

@CanActivate(() => LoginComponent.loggedIn()) 
export class AppComponent {  
}

authneticationなしロードからappComponentを防ぐために、どのように任意のアイデア？

出典

2016-05-18 user2180794

acitvateメソッドをオーバーライドして、自分がそのルートに移動できるかどうかを確認する独自のRouterOutletを実装できます。あなたのAppComponentで

import {Directive, DynamicComponentLoader, ElementRef} from "angular2/core"; 
import {AuthService} from '../../services/AuthService' 
import {Router, RouterOutlet, ComponentInstruction} from "angular2/router"; 

@Directive({ 
    selector: 'auth-router-outlet' 
}) 
export class AuthRouterOutlet extends RouterOutlet { 
    private _protectedRoutes = { 
     'app/home': true, 
     'app/dashboard': true, 
     'app/about': true 
    }; 

    constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, private _router: Router, nameAttr: string, private _authService: AuthService) { 
     super(_elementRef, _loader, _router, nameAttr); 
    } 

    activate(nextInstruction: ComponentInstruction): Promise<any> { 
     if (this._protectedRoutes[nextInstruction.urlPath]) { 
      if (!this._authService.loggedIn()) { 
       this._router.navigate(['Login']); 
      } 
     } 

     return super.activate(nextInstruction); 
    } 
}

だけ<auth-router-outlet></auth-router-outlet>で<router-outlet></router-outlet>を交換してください。あなたのRouteConfig使用中のリダイレクトのために

このような2つのアスタリスク：

@RouteConfig([ 
    {path: 'app/home', component: HomeComponent, as: 'Home'}, 
    {path: 'app/dashboard', component: DashboardComponent, as: 'Dashboard'}, 
    {path: 'app/about', component: AboutComponent, as: 'About'},  
    {path: 'app/login', component: LoginComponent, as: 'Login'}, 
    {path: 'app/**', redirectTo: ['Login']} // two asterisks here 
])

出典

2016-05-18 08:06:40 rinukkusu

プロパティ「routeNameは、」タイプ「ComponentInstruction」に存在しません...また、私は（）メソッドLOGGEDINに何がありますか？トークン？ – user2180794

Angularのどのバージョンを使用していますか？ – rinukkusu

バージョンは2.0.0-beta.17です。 – user2180794

AppcomponentがAngular2に読み込まれる前のユーザ認証

答えて

関連する問題