Question

我一直试图解决这个问题。我需要使用我的凭据连接到远程服务器，我能够没有问题。接下来我需要对服务器上的某些资源进行获取，根据我的角色1的经验我需要使用从登录阶段获得的凭据我似乎无法正确地做到这一点。

这就是我预先登录的方式：

import { Injectable } from 'angular2/core';
import { IjobCard } from '../jobCard/jobCard';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Icredentials } from './credentials';

@Injectable()
export class LoginService {
    private _loginUrl = 'MyUrl/Login';
    loginCred: Icredentials = {
        "filed1": "dummy1",
        "filed2": "dummy2", 
        "filed3": "dummy3"
    };

    constructor(private _http: Http){

    }

    login(): Observable<any>[] {
        return this._http.post(this._loginUrl, JSON.stringify(this.loginCred))
            .map((response: Response) => <any[]>response.json())
            .catch(this.handleError);

    }

    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

这就是我试图执行下一次获取的方式：

import { Injectable } from 'angular2/core';
import { IjobCard } from './jobCard';
import { Http, Response, Headers } from 'angular2/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class JobCardService {
    private _jobCardUrl = 'MyUrl/SomeGet';
    constructor(private _http: Http) {
    }

    getJobCard(): Observable<any>[] {
        var myHeders = new Headers();
        myHeders.append('Content-Type', 'application/json');
        return this._http.get(this._jobCardUrl, { headers: myHeders, withCredentials: true} )
        .map((response: Response) => <any[]>response.json())
        .catch(this.handleError);

    }

    private handleError(error: Response){
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

可悲的是，我得到的回复是未经授权的401，我已经根据Google提供的搜索结果尝试了许多其他方法......没有运气。

我能够通过角度1应用程序和邮递员连接到同一服务......

******* ******** UPDATE

好的，我试过跟随约翰贝尔德回答我的问题，但我无法使其发挥作用。但是我得到了一些新问题的线索：

服务器respose具有以下标题：

Access-Control-Allow-Credentials: true access-control-allow-headers: content-type, accept access-control-allow-methods: GET, POST, PUT, PATCH, DELETE, OPTIONS access-control-allow-origin: http://localhost:3000
我还发现在我的angular 1项目中包含cookie标题的请求如下：
```
Cookie: B1SESSION=GLWzfesg-sscK-yAH9-PH4m-99r5hCrOdddh; ROUTEID=.node0
```
但即使使用withCredentials标志，我的angular2项目也没有。

我尝试通过以下方式解决问题： https://github.com/angular/angular/issues/4231 把它添加到我的主要：

class MyBaseRequestOptions extends BaseRequestOptions {
    headers: Headers = new Headers({
        'X-Requested-With': 'XMLHttpRequest'
    });
    withCredentials: boolean = true;
}

bootstrap(AppComponent, [
    provide(RequestOptions, {useClass: MyBaseRequestOptions}) ]);

但仍然没有随我的请求发送Cookie。

这是正确的道路吗？还有其他想法吗？

Answer 1

好的，这是我登录后获取用户设置的电话。当您登录时，webapi2会返回一个令牌，该令牌可以授权该用户进行任何后续操作。您需要将该令牌作为授权标头发送...

getSettingsData(userId: number): Observable<User> {
    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);
    var t = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + t);


    return this.http.get(this.constants.userUrl + userId, { headers: headers })
      .map((response: Response) => <User>response.json())
      .catch(this.handleError);
  }

但是你的CORS错误是它变得棘手的地方。我正在使用WebApi 2并且有许多帖子涉及在IIS上启用CORS ....例如： Enable CORS in Web API 2

Answer 2

如我所要求，我提供适用于我的解决方案。这就是我预先登录的方式：

import { Injectable } from 'angular2/core';
import { IjobCard } from '../jobCard/jobCard';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Icredentials } from './credentials';

@Injectable()
export class LoginService {
    private _loginUrl = 'MyUrl/Login';
    loginCred: Icredentials = {
        "filed1": "dummy1",
        "filed2": "dummy2", 
        "filed3": "dummy3"
    };

    private headers = new Headers({ 'Content-Type': 'application/json' });

    constructor(private _http: Http){

    }

    login(): Observable<any>[] {
        return this._http.post(this._loginUrl, JSON.stringify(this.loginCred), 
            { headers: this.headers, withCredentials: true })
            .map((response: Response) => <any[]>response.json())
            .catch(this.handleError);

    }

更改是添加withCredentials和POST的标头。我没有对我进行任何其他更改，甚至没有对**** UPDATE ****部分进行更改。

Answer 3

你可以尝试这个解决方案，它适用于我

 compile group: 'com.sikulix', name: 'sikulixlibswin', version: '1.1.0'

angular2，http凭证。无法添加Cookie

3 个答案: