Question

我想使用基本和基于表单的身份验证从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工作正常，但注销服务不行。在开发者控制台“网络”选项卡中检查相同内容。

我的做法有什么问题？

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

0 个答案: