javascript - 将身份验证服务与 AuthGuard 连接(简单问题)

Question

我想这是一个很简单的问题，但不幸的是我真的不知道如何处理它。

我正在尝试将我的 UserAuthenticationService 服务与 ActivationGuard 连接。

UserAuthenticationService.ts:

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 => { //^^returns true or false, depending if the user is logged or not
                    this.isUserAuthenticated = res.json();
                },   
                err => {
                    console.error('An error occured.' + err);
                });
    }


}

ActivationGuard.ts

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

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

@Injectable()
export class WorksheetAccessGuard implements CanActivate {

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

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

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

注意事项

如果我只使用 localStorage 来存储用户登录与否的信息，效果很好:

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

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

但是如何将服务与守卫连接起来呢？期待任何形式的帮助。提前谢谢你。

如果您需要更多信息，请告诉我，我将编辑我的帖子。

Answer 1

在构造函数中或在 ngOnit 中调用 UserAuthenticationService 的 authentication() 方法，然后它设置 isUserAuthenticated 变量并在 ActivationGuard.ts 中使用它

UserAuthenticationService.ts:

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

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

    constructor(private http: Http) {
    this.authentication();
    }

    authentication() {
        this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
            .subscribe(res => { //^^returns true or false, depending if the user is logged or not
                    this.isUserAuthenticated = res.json();
                },   
                err => {
                    console.error('An error occured.' + err);
                });
    }


}  

ActivationGuard.ts

 @Injectable()
export class WorksheetAccessGuard implements CanActivate {

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

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

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