javascript - ng2-smart-table の ServerDataSource が Windows 認証のために Web API に資格情報を送信しない

これは長い質問になるでしょう。

Windows認証をAngularで機能させるために、以下に示すようにHTTP呼び出し用のラッパーがあります

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers, RequestOptionsArgs } from '@angular/http';
import { Config } from '../_helpers/config';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HTTPUtility {
    public baseApiUrl: string;
    constructor(private http: Http, private config: Config) {
        this.baseApiUrl = this.config.getByKey('baseApiUrl') || '';
    }

    public getApiUrl(url) {
        return this.baseApiUrl + url;
    }

    public get(url: string, options?: RequestOptions) {
        if (!options) {
            options = this.getDefaultHeaders();
        }
        return this.http.get(this.getApiUrl(url), options)
            .catch(this.handleError);
    }

    private getDefaultHeaders() {
        let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
        headers.append('Accept', 'application/json');
        return new RequestOptions({ headers, withCredentials: true });
    }

    public handleError(response: Response) {
        return Observable.throw(JSON.parse(response.json().Message) || 'Server error');
    }
}

もし new RequestOptions({ headers, withCredentials: true }); を観察すると、ブラウザがWindows認証のためにサーバーに認証情報を送信することを許可しているのがわかります。そして、それはすべてに対してうまく動作しています。

さて、問題に移りますが、私は sampleComponent を持っており、その中で以下のように ServerDataSource を使用しています:

import { Component, OnInit, NgZone } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { Ng2SmartTableModule, ServerDataSource } from 'ng2-smart-table';

@Component({
selector: 'criteria',
templateUrl: './criteria.component.html',
styles: [require('./criteria.scss')],
})

export class SampleComponent implements OnInit {

    Source: ServerDataSource;
    settings: any;
    constructor(
    private http: Http) {
    this.Source = new ServerDataSource(http, { endPoint: 'https://xxxxxx.org/yyy/GetCriterias'});
   }

     ngOnInit(): void {
        // this.settings = {}// assigning the settings.
    }
}

ご覧の通り、ServerDataSource は Http インスタンスを受け取っていますが、私はそのドキュメントを確認しても RequestOptions に渡す方法は見つかりませんでした。そのため、ng2-smart-table が行う Web API 呼び出しは、認証情報が渡されないため 401 ステータスで失敗します。

この問題を解決するために、私は ng2-smart-table のソースファイル、具体的には 'server.data-source.js' に直接変更を加えました。そして、ここにその変更があります

ServerDataSource.prototype.createRequestOptions = function () {
        var requestOptions = {withCredentials : true}; // this where I have added the withCredntials flag
        requestOptions.params = new URLSearchParams();
        requestOptions = this.addSortRequestOptions(requestOptions);
        requestOptions = this.addFilterRequestOptions(requestOptions);
        return this.addPagerRequestOptions(requestOptions);
    };

この変更により、現時点ではすべて正常に動作しています。しかし、将来的にパッケージをアップグレードした場合には問題が発生する可能性があり、その場合は再度変更を行う必要があります。

もし誰かが他の方法でこの問題を解決する手助けをしてくれるなら、ぜひ教えてください。

リンク: https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/advanced-example-server.component.ts

ありがとう。