Question

我需要帮助:)我正在开始创建授权服务，突然http客户端无法在该服务中使用，并且在花了四个小时的代码后，我无法弄清楚为什么并且没有任何想法。服务真的很简单。

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { UrlsService, Urls } from '@app/shared/urls';
import { Injectable } from '@angular/core'

@Injectable()
export class AuthorizationService {
    private _permissions: string[];

    constructor(
        private httpClient: HttpClient,
        private urlsService: UrlsService) {

    }

    refreshPermissions(): Observable<string[]> {
        return this.httpClient
            .get('http://localhost:54531/api/account/permissions', { observe: 'response'})
            .map(response => {
                console.log(response);
                return this._permissions;
            });
    }

    get permissions(): string[] {
        return this._permissions;
    }

refreshPermissions方法调用每个用户的凭据更新。查看app.component.ts

ngOnInit() {  
       this.authenticationService.setCredentialsSubject.subscribe(() => this.authorizationService.refreshPermissions());
       this.authenticationService.loadCredentialsFromLocalStorage();
}

我已经在map函数上设置了断点以查看响应结构。但是我看到了错误。此外，在网络标签中，我可以看到该请求尚未触发。最后，地图Labmda内的断点永远不会触发。

我花了四个小时试图找出错误，但没有成功。你有什么想法吗？

PS。第一个屏幕上的错误

"SyntaxError: Unexpected end of input
    at AuthorizationService.refreshPermissions (webpack-internal:///./src/app/core/authentication/authorization/authorization.service.ts:14:14)
    at SafeSubscriber.eval [as _next] (webpack-internal:///./src/app/app.component.ts:40:116)
    at SafeSubscriber.__tryOrUnsub (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:245:16)
    at SafeSubscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:192:22)
    at Subscriber._next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:133:26)
    at Subscriber.next (webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:18)
    at Subject.next (webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:66:25)
    at AuthenticationService.setCredentials (webpack-internal:///./src/app/core/authentication/authentication.service.ts:86:37)
    at AuthenticationService.loadCredentialsFromLocalStorage (webpack-internal:///./src/app/core/authentication/authentication.service.ts:61:14)
    at AppComponent.ngOnInit (webpack-internal:///./src/app/app.component.ts:41:36)"

Answer 1

您不订阅refreshPermissions函数。没有订阅，您的功能将不会被触发。

您可以使用以下ngOnInit函数简单地解决此问题：

ngOnInit() {  
   this.authenticationService.setCredentialsSubject.subscribe(() => this.authorizationService.refreshPermissions().subscribe(result => {}));
   this.authenticationService.loadCredentialsFromLocalStorage();
}

使用rxjs的运算符之一（例如flatmap）甚至比拥有多个订阅还要好：

ngOnInit() {  
    this.authenticationService.setCredentialsSubject.flatMap(() => 
        this.authorizationService.refreshPermissions()
    ).subscribe(result => {
        //do something with result of refreshPermissions observable
    });
    this.authenticationService.loadCredentialsFromLocalStorage();
}

最终代码

permissions.service

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { UrlsService, Urls } from '@app/shared/urls';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

type PermissionType = 'Permission1' | 'Permission2';
type PermissionsSubject = BehaviorSubject<PermissionType[]>;

export class AuthorizationService {
    private _permissionsSubject: PermissionsSubject = new BehaviorSubject<PermissionType[]>([]);

    constructor(
        private httpClient: HttpClient,
        private urlsService: UrlsService) {

    }

    refreshPermissions(): void {
        const getPermissionsObservable = this.httpClient
            .get<PermissionType[]>(this.urlsService.getUrl(Urls.GET_PERMISSIONS));
        getPermissionsObservable.subscribe(permissions => this._permissionsSubject.next(permissions));
    }

    get permissions(): PermissionType[] {
        return this._permissionsSubject.value;
    }

    get permissionsSubject(): PermissionsSubject {
        return this._permissionsSubject;
    }
}

在app.component中

ngOnInit() {
    authenticationService.setCredentialsSubject.subscribe(() => authorizationService.refreshPermissions());
    authenticationService.loadCredentialsFromLocalStorage()
}

Typescript魔术：http客户端获取不会触发请求

1 个答案: