如何通過POST注銷Angular / Spring

Question

我想使用POST方法通過Angular注銷，這是我的代碼：

  logout() {
    const url = 'http://localhost:8181/user/logout';
    const xToken = localStorage.getItem('xAuthToken');
    const basicHeader = 'Basic ' + localStorage.getItem('credentials');
    const headers = new Headers({
      'x-auth-token': xToken,
      'Authorization': basicHeader
    });
    // return this.http.get(url, { headers: headers }); // This will work
    return this.http.post(url, { headers: headers }); // This will generate error
  }

這是我的后端：

@RequestMapping("/user/logout")
public ResponseEntity<String> logout(){
    SecurityContextHolder.clearContext();
    return new ResponseEntity<String>("Logout Successfully!", HttpStatus.OK);
}

奇怪的是上面的代碼使用this.http.get但是會在this.http.post生成以下錯誤。 以下是this.http.post錯誤：

POST http://localhost:8181/user/logout 401

如果我使用HttpClient修改代碼，如下所示：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(private http: HttpClient) {
  }

  sendCredential(username: string, password: string) {
    let url = "http://localhost:8181/token";
    let encodedCredentials = btoa(username + ":" + password);// encode in base64 to send a token
    let basicHeader = "Basic " + encodedCredentials;
    let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': basicHeader
    })
    // send credential method when login component
    return this.http.get(url, { headers: headers }); // Error at this line
  }

  checkSession() {
    const url = 'http://localhost:8181/checkSession';
    const xToken = localStorage.getItem('xAuthToken');
    const basicHeader = 'Basic ' + localStorage.getItem('credentials');
    const headers = new Headers({
      'x-auth-token': xToken,
      'Authorization': basicHeader
    });
    return this.http.get(url, { headers: headers }); // Error at this line
  }

  logout() {
    const url = 'http://localhost:8181/user/logout';
    const xToken = localStorage.getItem('xAuthToken');
    const basicHeader = 'Basic ' + localStorage.getItem('credentials');
    const headers = new Headers({
      'x-auth-token': xToken,
      'Authorization': basicHeader
    });

    return this.http.get(url, { headers: headers }); // Error at this line
  }
}

然后我收到錯誤消息：

(property) headers?: HttpHeaders | {
    [header: string]: string | string[];
}
Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
  Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.
    Index signature is missing in type 'Headers'.ts(2322)
http.d.ts(1086, 9): The expected type comes from property 'headers' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'

at line return this.http.get(url, { headers: headers });

誰知道怎么修它？

Answer 1

嘗試像這樣設置headers ：

let headers = new HttpHeaders();
headers = headers.set('x-auth-token', xToken).set('Authorization', basicHeader);

接着，

return this.http.post(url, null, headers );

傳遞null因為它接受body如第二個參數。

使用HttpClient ：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

在app.module.ts中：

import { HttpClientModule } from '@angular/common/http';

在@NgModule中： imports: [ HttpClientModule ]

Answer 2

這是正常的，默認情況下，@ @RequestMapping("/user/logout")只接受GET請求。 您必須明確設置方法

@RequestMapping("/user/logout", method = RequestMethod.POST)
public ResponseEntity<String> logout(){
    SecurityContextHolder.clearContext();
    return new ResponseEntity<String>("Logout Successfully!", HttpStatus.OK);
}

或者使用@PostMapping

Answer 3

嘗試這個：

constructor(private http:HttpClient){}
logout()
{
    const url = 'http://localhost:8181/user/logout';
    const headers = new HttpHeaders()
      .set('x-auth-token', localStorage.getItem('xAuthToken'));

    return this.http.post(url, '' ,{headers: headers, responseType: 'text'})};

在Spring中，我的建議是使用@PostMapping或@DeleteMapping注釋而不是@RequestMapping 。 將ResponseType用作“text”的原因是因為您提供了String類型的ResponseEntity<> ，默認情況下，Angular會將響應視為JSON。

此外，請記住使用localStorage.removeItem('xAuthToken'); 在訂閱該observable時的響應中，還取消訂閱ngOnDestroy()生命周期中的ngOnDestroy() 。