javascript - 在Angular中通过AuthGuard奋斗

尝试遵循此处提供的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

**我的主要目标是检查每个组件的更改（当用户浏览页面时）是否已登录。如果不是，请让他返回登录页面。

编辑2

我可以仅将服务中的所有逻辑发布到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;
    }
}

最佳答案

RouterStateSnapshot和ActivatedRouteSnapshot是从@angular/router导入的，而currentUser Service应该是您自己的，应在其中存储User的身份验证状态（例如，布尔值）。

您可以通过后卫的构造函数中的依赖注入来检索它的实例，如下所示：

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

constructor(private userService: CurrentUserService)
{}

您需要在模块（以及您的守护程序）中提供服务，并且您需要在CurrentUserService中具有如下属性：

CurrentUserService：

isAuthenticated: boolean = false;

这样，当您从登录组件（我假设您有一个）登录时，可以将service属性设置为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;
}