注意

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

在构造函数或On 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;
    }
}

Answer 2

这不是正确的做法。每次调用服务时，它都会初始化一个新实例，因此会出现错误。

您应该创建一个单例服务实例（通过应用程序中的主模块） - 它将包含您的应用程序状态（在内存/本地存储中）

然后，当你打电话给UserAuthenticationService时 - 你不会更新其owbn参数，而是更新主要参数（单身人士）。

我建议你使用BehaviourSubject（读一下它，它就像一个主题，但它也会产生它的最后一个值，而不是等待手动发出一个值）。

从那时起，您的应用可以在任何地方看到用户登录或不登录。

将身份验证服务与AuthGuard连接（简单问题）

注意

2 个答案: