Javascript 身份验证服务总是返回false

我的身份验证服务几乎可以正常工作，但问题是，如果用户已登录或未登录，我将从异步http请求获取信息

激活Guard.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 ActivationGuard implements CanActivate {

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

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

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

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

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

    constructor(private http: Http) {}


    ngOnInit(){
        this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)

            .subscribe(res => {
                    this.isUserAuthenticated = res.json();
                },
                err => {
                    console.error('An error occured.' + err);
                });
    }


}

每次我得到

false

（即使我已登录，也不允许我进入应用程序）

但是如果我更改

isUserAuthenticated:boolean=false行从
UserAuthenticationService.ts文件到
true
-它永远不会把我踢出去-
isUserAuthenticated
始终是true

它可能是由http请求及其异步性质引起的吗？或者也许有更好的方法来处理它

期待任何帮助。谢谢。
您不仅可以返回布尔值，还可以在canActivate方法中返回可观察或承诺值：

激活Guard.ts

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

@Injectable()
export class ActivationGuard implements CanActivate {

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


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.userService.isUserAuthenticated
            .do(success => {
                if (!success) {
                    this.router.navigate(['/']);
                }
            });
    }
}

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

@Injectable()
export class UserAuthenticationService {
    public isUserAuthenticated:Observable<boolean>;
    username: string = 'admin';

    constructor(private http: Http) {
        this.isUserAuthenticated = this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
            .map(res => res.json())
            .share();
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Router'导入{Router，CanActivate，ActivatedRouteSnapshot，RouterStateSnashot}；
从“rxjs/Observable”导入{Observable}；
从“/UserAuthenticationService”导入{UserAuthenticationService}；
@可注射（）
导出类ActivationGuard实现CanActivate{
构造函数（专用路由器：路由器，专用用户服务：UserAuthenticationService）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回this.userService.isUserAuthenticated
.do（成功=>{
如果（！成功）{
this.router.navigate（['/']）；
}
});
}
}

另外，让我们将isUserAuthenticated设置为可观察，以便ActivationGuard将在此管道上订阅：

UserAuthenticationService.ts

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

@Injectable()
export class ActivationGuard implements CanActivate {

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


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.userService.isUserAuthenticated
            .do(success => {
                if (!success) {
                    this.router.navigate(['/']);
                }
            });
    }
}

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

@Injectable()
export class UserAuthenticationService {
    public isUserAuthenticated:Observable<boolean>;
    username: string = 'admin';

    constructor(private http: Http) {
        this.isUserAuthenticated = this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
            .map(res => res.json())
            .share();
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类UserAuthenticationService{
公共isUserAuthenticated：可观察；
用户名：string='admin'；
构造函数（专用http:http）{
this.isUserAuthenticated=this.http.get(`http://localhost/api/auth/isLogged/${this.username}`）
.map（res=>res.json（））
.share（）；
}
}
在canActivate方法中，您不仅可以返回布尔值，还可以返回可观察值或承诺值：

激活Guard.ts

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

@Injectable()
export class ActivationGuard implements CanActivate {

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


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.userService.isUserAuthenticated
            .do(success => {
                if (!success) {
                    this.router.navigate(['/']);
                }
            });
    }
}

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

@Injectable()
export class UserAuthenticationService {
    public isUserAuthenticated:Observable<boolean>;
    username: string = 'admin';

    constructor(private http: Http) {
        this.isUserAuthenticated = this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
            .map(res => res.json())
            .share();
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Router'导入{Router，CanActivate，ActivatedRouteSnapshot，RouterStateSnashot}；
从“rxjs/Observable”导入{Observable}；
从“/UserAuthenticationService”导入{UserAuthenticationService}；
@可注射（）
导出类ActivationGuard实现CanActivate{
构造函数（专用路由器：路由器，专用用户服务：UserAuthenticationService）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察{
返回this.userService.isUserAuthenticated
.do（成功=>{
如果（！成功）{
this.router.navigate（['/']）；
}
});
}
}

另外，让我们将isUserAuthenticated设置为可观察，以便ActivationGuard将在此管道上订阅：

UserAuthenticationService.ts

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

@Injectable()
export class ActivationGuard implements CanActivate {

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


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.userService.isUserAuthenticated
            .do(success => {
                if (!success) {
                    this.router.navigate(['/']);
                }
            });
    }
}

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

@Injectable()
export class UserAuthenticationService {
    public isUserAuthenticated:Observable<boolean>;
    username: string = 'admin';

    constructor(private http: Http) {
        this.isUserAuthenticated = this.http.get(`http://localhost/api/auth/isLogged/${this.username}`)
            .map(res => res.json())
            .share();
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类UserAuthenticationService{
公共isUserAuthenticated：可观察；
用户名：string='admin'；
构造函数（专用http:http）{
this.isUserAuthenticated=this.http.get(`http://localhost/api/auth/isLogged/${this.username}`）
.map（res=>res.json（））
.share（）；
}
}
谢谢，我已经完成了您的每个步骤，但不幸的是，在输入受保护的组件时，它会给我一个错误：
承诺拒绝。无法读取未定义的属性“do”
。你知道我为什么会收到这样的错误吗？@Kaysh尝试在构造函数中初始化isUserAuthenticated，而不是ngOnInit。我修改了答案。我很惊讶它是如何工作的。真是太神奇了。谢谢。谢谢，我已经完成了您的每一步，但不幸的是，它在输入受保护组件时抛出了一个错误：
承诺拒绝。无法读取未定义的属性“do”
。你知道我为什么会收到这样的错误吗？@Kaysh尝试在构造函数中初始化isUserAuthenticated，而不是ngOnInit。我修改了答案。我很惊讶它是如何工作的。真是太神奇了。谢谢你。