通過AuthGuard在角

Question

掙扎試圖按照可在這裏AuthGuard例如： http://www.sparkbit.pl/angular-2-route-guards-real-life-example/

不幸的是，在試圖實施ActivationGuard.ts文件，我收到一些錯誤。

ERROR in C:/Users/app/src/app/ActivationGuard.ts (6,24): Cannot find name 'ActivatedRouteSna 
pshot'.) 
C:/Users/app/src/app/ActivationGuard.ts (6,55): Cannot find name 'RouterStateSnapshot'.) 
C:/Users/app/src/app/ActivationGuard.ts (13,62): Cannot find name 'CurrentUserService'.) 
C:/Users/app/src/app/ActivationGuard.ts (15,31): Cannot find name 'ActivatedRouteSnapshot'.) 
C:/Users/app/src/app/ActivationGuard.ts (15,62): Cannot find name 'RouterStateSnapshot'.) 

這基本上意味着，CanActivate接口和內部構造內的元件並不限定。

routing文件：

import { WorksheetAccessGuard } from "./ActivationGuard"; 

const appRoutes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: 'app', component: AppComponent, canActivate: [WorksheetAccessGuard] }, 
    { path: '**', redirectTo: '' } 
]; 

我的問題：從哪裏可以得到這些缺失的元素？我的IDE的

提供的圖像：（紅色字是沒有的部分）

編輯

我已經做了定製服務。我不知道，如果它的精細與否：

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 

@Injectable() 
export class UserAuthenticationService { 
    isUserAuthenticated: boolean = false; 
    username: string; 

    constructor(private http: Http) { 
    } 

    authentication() { 
     this.http.get(`http://localhost/api/auth/isLogged/${this.username}`) 
      .subscribe(res => { 
        this.isUserAuthenticated = res.json(); 
       }, 
       err => { 
        console.error('An error occured.' + err); 
       }); 
    } 


} 

現在，我收到了AuthGuard文件裏面的一些錯誤：

ERROR PIC

**我的主要目標是與每一個部件改變檢查（當用戶在頁面上瀏覽時）如果他記錄或不記錄。如果沒有 - 將他返回到登錄頁面。

EDIT2

我可以只發布所有的邏輯從AuthGuard文件中的服務？它看起來像：

import {Injectable} from '@angular/core'; 
import {Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router'; 
import {Observable} from 'rxjs/Observable'; 
import {UserAuthenticationService} from './UserAuthenticationService'; 
import {Http} from '@angular/http'; 

interface CanActivate { 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean 
} 

@Injectable() 
export class WorksheetAccessGuard implements CanActivate { 
    private static username: string; 
    isUserAuthenticated: boolean = false; 

    constructor(private router: Router, private userService: UserAuthenticationService, private http: Http) { 
    } 

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 

     this.http.get(`http://localhost/api/auth/isLogged/${this.username}`) 
      .subscribe(res => { 
        this.isUserAuthenticated = res.json(); 
       }, 
       err => { 
        console.error('An error occured.' + err); 
       }); 

     if (!this.isUserAuthenticated) { 
      this.router.navigate(['/']); 
      return false; 
     } 
     return true; 
    } 
} 

Answer 1

RouterStateSnapshot和ActivatedRouteSnapshot從@angular/router進口，而currentUser服務應該是你自己的，你應該將用戶的認證狀態存儲（含例如布爾值）。

你在你放鬆警惕的構造檢索通過依賴注入一個它的實例，像這樣：需要

import { CurrentUserService } from './path/to/your/service/file'; 
import { RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router'; 

constructor(private userService: CurrentUserService) 
{} 

您服務您的模塊中提供，（以及你的後衛），你需要有在CurrentUserService這樣的特性：

CurrentUserService：

isAuthenticated: boolean = false; 

這樣，當你從你的登錄組件登錄（我假設你有一個），你可以在服務屬性設置爲true：

LoginComponent：

import { CurrentUserService } from './path/to/your/service/file'; 

constructor(private userService: CurrentUserService) 
{} 

login() { 

... // Your existing code where you login on form submit or anything 

this.userService.isAuthenticated = true; 
} 

編輯：

看看我的例子，它應該適合你的。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if (!this.authService.isAuthenticated) { 
     // Deny navigation and redirect to login 
     this.router.navigate(['/path/to/login']); 
     return false; 
    } 
    // Allow navigation (be careful that the guard always resolve a value) 
    return true; 
}