Question

我目前正在使用带有TypeScript的Angular2开发一个Web应用程序（如果这很重要）此应用程序必须与Web服务器通信，该服务器要求进行摘要式身份验证到目前为止，我正在使用浏览器的本机登录提示，当服务器返回未授权的＆＃34;时，它会自动显示。浏览器仅要求进行一次身份验证，并自动将此用户名和密码用于将来的请求。所以我不必关心身份验证，浏览器会为我做一切不幸的是现在我必须创建一个自定义登录屏幕，因为我必须实现一些默认操作，例如＆＃34; register＆＃34;或者＆＃34;重置密码＆＃34;，通常可以从该屏幕访问。
由于摘要认证非常复杂，浏览器已经为我做了所有复杂的事情，我想继续使用浏览器功能，但不使用它的登录提示。
那么是否可以使用浏览器验证功能？
如果可能，我该如何设置应该使用的用户名和密码？

修改
由于有人想将这个问题关闭为＃34;广泛的＆＃34;，我会尝试添加更多细节。
Web应用程序从宁静的Web服务获取数据。如果您使用错误的用户名或密码，此Web服务需要摘要式身份验证并以401响应如上所述，如果他收到401错误，浏览器会自动显示登录提示。如果您输入有效的登录名，浏览器会在某处缓存这些值，并自动为每个将来的请求设置它们现在我基本上想要替换登录提示并以编程方式设置浏览器用于登录的值我希望这有助于澄清问题。

Answer 1

基本上你必须编写一个HTTP装饰器来拦截响应代码401.然后你添加Authentication标题并重播请求。

import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class CustomHttp extends Http {

    /**
     * intercept request
     * @param {Observable<Response>} observable to use
     * @param {string} url to request
     * @returns {Observable<Response>} return value
     * @private
     */
    private _intercept(observable: Observable<Response>, url: string): Observable<Response> {
        return observable.catch(error => {
            if (error.status === 401) {

                // add custom header
                let headers = new Headers();
                headers.append('Authentication', '<HEADER>');

                // replay request with modified header
                return this.get(url, new RequestOptions({
                    headers: headers
                });

            } else {
                return Observable.throw(error);
            }
        });
    };

    /**
     * constructor
     * @param {ConnectionBackend} backend to use
     * @param {RequestOptions} defaultOptions to use
     * @returns {void} nothing
     */
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    };

    /**
     * get request
     * @param {string} url to request
     * @param {RequestOptionsArgs} options to use
     * @returns {Observable<Response>} return value
     */
    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this._intercept(super.get(url, options), url);
    };

}

对我来说没有用的是确定正确的答案，因为有一个针对Angular2（https://github.com/angular/angular/pull/9355）的错误，该错误在几天前合并。

您必须在第一个成功请求之后为每个有效请求递增请求计数器。

也许其他人可以出现一个有效的解决方案。

Javascript使用本机浏览器身份验证

1 个答案: