Question

我想做的是使用isAuth函数从后端检索数据并使该函数返回该数据。然后，当我调用该函数时，数据将返回到变量中，并且可以使用该数据。

import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService implements CanActivate  {
    constructor( private http: HttpClient, private router: Router ) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        var isAuth = this.isAuth()
        console.log(isAuth);

    }

    isAuth(){
        let obs = this.http.get('server/page/auth');
        obs.subscribe((res) => { return res});
    }   

}

当我控制台日志isAuth时，我得到undefined。据我了解，这是因为它不是异步的。在node.js中，您基本上可以将await放在函数的前面，这可以解决问题。我该怎么办？如何将数据从isAuth返回到变量中？

Answer 1

您需要从isAuth返回可观察对象，并从canActivate函数进行订阅

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     this.isAuth().subscribe((res) => { console.log(res);});

}

isAuth(){
    return this.http.get('server/page/auth'); 
}

Answer 2

您的isAuth函数没有返回值。您订阅了HTTP请求，但实际上不对其执行任何操作。

obs.subscribe((res) => { return res });

return res从内部匿名函数返回。它不会从isAuth返回！

Angular文档：

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

所以有很多方法可以做到这一点。无论如何，canActivate函数将必须返回一个Observable，该Observable发出一个布尔值，一个解析为布尔值的Promise或布尔值原语。您无法返回订阅。如果您使用的是Observables，则可以尝试以下操作：

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.isAuth();
}

isAuth(): Observable<boolean> {
    return this.http.get('server/page/auth').map(res => res.message === 'success');

    // You are returning the Observable here
    // Do use 'map' and other rxjs stream operators, do not use subscribe!!! 
    // Using subscribe will change your return value to 'Subscription', not 'Observable'!!
}

您可以查看有关Observable，观察者，订阅和订阅者的RxJS文档。祝你好运

角度6：如何从可观察值返回数据？

2 个答案: