Angular2がサービスにコンポーネントを分割し、私はログインのため<code>Auth0</code>と<code>angular2-jwt</code>を使用しています、と私は、ユーザーがログインしているときの経路を遮断するためにCanActivateを実装しようとしているAuthGuard

Question

を追加します。
私はnavbar.componentにログインコードを実装していますそれをモジュール化する方法を理解しようとしています。私はサービスの例をいくつか持っていますが、どれもこのケースとは一致しないので、ここに来ました。

1. ルートをブロックするようにAuthGuardを実装します。

   は、だから私は作るために2つのステップがあると思います。

2. このコンポーネントをサービスに分割して、ユーザーがログに記録されているかどうかに応じてAuthGuardに指示を送信し、ルートをブロックまたは許可することができます。

私は誰かが私に解決策を与え、私はそれから学ぶことができると願っています。 ありがとうございます。

Navbar.component.ts：

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES, CanActivate } from '@angular/router'; 
import {tokenNotExpired, JwtHelper} from 'angular2-jwt'; 

declare var Auth0Lock; 

@Component({ 
    moduleId: module.id, 
    selector: 'navbar', 
    template : ` 
    <button *ngIf="!loggedIn()" (click)="login()">Login</button> 
    <button *ngIf="loggedIn()" (click)="logout()">Logout</button> 

    <a *ngIf="loggedIn()" [routerLink]="['/users']">Users</a> 

    <button *ngIf="!loggedIn()" (click)="login()" class="btn btn-danger">Login</button> 
    <button *ngIf="loggedIn()" (click)="logout()" class="btn btn-default">Logout</button> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class NavbarComponent{ 
    lock = new Auth0Lock('xxxxxxxxxxxxxxxxx','yyyyyyyyyyyyyy') 
    jwtHelper: JwtHelper = new JwtHelper(); 
    location: Location; 
    profile : any; 

constructor(){ 
    this.profile = JSON.parse(localStorage.getItem('profile')); 
} 

login(){ 
var self = this; 
this.lock.show((err: string, profile: string, id_token: string) =>{ 
    if (err){ 
    throw new Error(err); 
    } 

    localStorage.setItem('profile', JSON.stringify(profile)); 
    localStorage.setItem('id_token', id_token); 

    self.loggedIn(); 
}); 
} 

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

    this.loggedIn(); 
} 

loggedIn(){ 
    return tokenNotExpired(); 
} 
} 

auth.guard.ts：

import { CanActivate } from '@angular/router'; 
export class AuthGuard implements CanActivate { 
    canActivate() { 
    return true; 
    } 
} 

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router'; 
import {UsersComponent} from './users/users.component'; 
import {AuthGuard} from './navbar/auth.guard'; 

export const routes: RouterConfig = [ 
    { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },    
]; 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(routes), 
    AuthGuard 
]; 

Answer 1

フォンドソリューションHere：

Auth.Guard.ts

import { CanActivate } from '@angular/router'; 
import { tokenNotExpired } from 'angular2-jwt'; 

export class AuthGuard implements CanActivate { 
    canActivate() { 
     if (tokenNotExpired()) { 
     return true; 
     } 
    } 
}