在Angular

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服务应该是您自己的，您应该存储用户的身份验证状态（例如，使用布尔值）

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

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