javascript - 在 Angular 中挣扎于 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 接口(interface)内的元素和构造函数内的元素未定义。

路由文件:

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

Answer 1

RouterStateSnapshot 和 ActivatedRouteSnapshot 是从 @angular/router 导入的，而 currentUser Service 应该是您自己的，您应该在其中存储您的用户的经过身份验证的状态(例如，使用 bool 值)。

您可以通过守卫构造函数中的依赖注入(inject)检索它的实例，如下所示:

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

constructor(private userService: CurrentUserService) 
{}

您的服务需要在您的模块(以及您的守卫)中提供，并且您需要在 CurrentUserService 中拥有这样的属性:

当前用户服务:

isAuthenticated: boolean = false;

这样，当您从登录组件登录时(我假设您有一个)，您可以将服务属性设置为 true :

登录组件:

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