基于 Angular 4 令牌的身份验证答案

【问题标题】：Angular 4 token based authentication基于 Angular 4 令牌的身份验证
【发布时间】：2017-11-12 19:05:50
【问题描述】：

当我发布用户名和密码时，我需要返回给我。当我使用 get 方法获取该令牌时，我需要从 URL 返回数据。但错误是 http://tcmtestapi.azurewebsites.net/api/demo/inventory: 预检响应包含无效的 HTTP 状态代码 405。

@Component({
  selector: 'app-envanter',
  templateUrl: './envanter.component.html',
  styleUrls: ['./envanter.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class EnvanterComponent implements OnInit {
  userName= 'tcmtest';
  password= '123456';
  token : string;
  error: any;
  envanterList: any;

  constructor(private envanterService: EnvanterService) { }

  ngOnInit() {
    this.envanterService.login(this.userName, this.password);
    this.envanterList = this.envanterService.getEnvanterList(this.token)
    .subscribe(
      envanterList => this.envanterList = envanterList,
      error => this.error = error
    );
  }

}

@Injectable()
export class EnvanterService {
  public token: string;

  constructor(private http: Http) {
    this.token = localStorage.getItem('token');
    this.http = http;

  }
  login(userName: string, password: string): Observable<any> {
    let url = `http://tcmtestapi.azurewebsites.net/api/demo/token`;
    let body = JSON.stringify({userName,password});
    let headers = new Headers({ 'Content-Type': 'application/json; charset=UTF-8' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(url, body, options)
      .map((res: any) => {
        let data = res.json();
        this.token = data.token;
        return this.token; 
      });

  }

  getEnvanterList(token) {
    this.token = token;
    let url = `http://tcmtestapi.azurewebsites.net/api/demo/inventory`;
    let headers = new Headers({'Authorization': 'Bearer ' + this.token});
    let options = new RequestOptions({ headers: headers });
    return this.http.get(url,options)
      .map((response: Response) => response.json())
  }
}

【问题讨论】：

标签： angular typescript authentication token

【解决方案1】：

您的 API 中是否启用了 CORS？如果您启用了它，请添加withCredentials : true，如下所示：

this.options = new RequestOptions({ headers: this.headers, withCredentials : true });

【讨论】：