如何在angular2或angular4中进行基于RESTful的基本身份验证？

我想使用基本和基于表单的身份验证从angular2/angular4登录

因为我的服务器端只支持这些

我跟着

但在这里，他们已经使用了代币，但我不使用代币

所以我尝试了以下方法

import { Http, Response, Headers } from '@angular/http';
import { Injectable } from "@angular/core";
import { GeneralService } from './general.service';
import { Observable } from "rxjs/Observable";
import 'rxjs/Rx';

@Injectable()
export class AuthService {
  constructor(private http: Http, private generalService: GeneralService) {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));

}

login(username: string, password: string) {
      let header: Headers = new Headers();
      header.append("Authorization", "Basic " + btoa(username + ":" + password)); 
      header.append("Content-Type", "application/x-www-form-urlencoded");
      return this.http.post("http://localhost:8080/server/authentication/login", {headers: header})
      .map((response:Response) => {
               localStorage.setItem('currentUser', JSON.stringify({ username: username }));
                return true;
      })
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

logout() {
    console.log("logging out");
    return this.http.post("http://localhost:8080/server/authentication/logout", {})
    .map((response:Response) => {
        console.log("logout success");
        localStorage.removeItem('currentUser');
     })
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

}

也login.html

<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
        <label for="username">Username</label>
        <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
        <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
    </div>
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
        <label for="password">Password</label>
        <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
        <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
    </div>
    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Login</button>

    </div>
</form>

登录
用户名
用户名是必需的
密码
密码是必需的
登录

这段代码有两个问题

我的服务器端未将此识别为基于表单的请求。因为它只支持基于表单的身份验证这是正确的还是基于表单的？我们需要在模式弹出窗口中显示登录信息吗？

如果我单击标题上的注销按钮。它转到AuthService中的确切方法“logout（）。Console.log工作正常，但注销服务无法运行。在开发人员控制台的“网络”选项卡中选中了相同的选项

---

我的方法有什么问题

一,。因为它不是？您声称正在发布表单数据，但不包含正文并将信息放在标题中。不相关但很重要：不要导入整个

rxjs

库。你实际上是在逃避摇树的好处。对于每个操作符，通过导入

rxsj/add/operators/map

操作符的

rxsj/add/operators/switchMap

操作符的

。因为它不是？您声称正在发布表单数据，但不包含正文并将信息放在标题中。不相关但很重要：不要导入整个
rxjs
库。你实际上是在逃避摇树的好处。对于每个操作符，通过导入
rxsj/add/operators/map
来添加
.map
操作符，
rxjs/add/operators/switchMap
来添加
.switchMap
等等。