Angular 4 HTTP请求处于保护状态

Question

我正在尝试在警卫队内部使用HTTP请求，但总是收到错误消息。当我删除HTTP请求并使用if条件时，就可以了。

isAdmin.guard.ts

import { Injectable } from '@angular/core';
import { Router ,CanActivate } from '@angular/router';
import { AuthService } from '../services/auth.service';

@injectable()

export class IsAdmin implements CanActivate {
    constructor(
        private auth:AuthService,
        private router:Router
    ){}


    canActivate(){
        //get user data
        this.auth.getUserData().subscribe((data)=>{
            if(data.isAdmin){
                return true;
            }else{
                this.auth.loggedIn();
                this.router.navigate(['/login']);
            }
        })
    }


}

图片来自编辑

Answer 1

Observable<boolean> | Promise<boolean> | boolean如您在此链接中所见，CanActivate必须返回一个。

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

就您而言，您只能返回this.auth.getUserData()。但是，此类函数不会返回Observable<boolean>，而是返回Observable<data>。因此，您应该将其映射为返回Observable<boolean>：

canActivate(): Observable<boolean> {
    //get user data
    return this.auth.getUserData().map((data)=>{
        if(data.isAdmin){
            return true;
        }else{
            this.auth.loggedIn();
            this.router.navigate(['/login']
            return false;
        }
    })
}