如何通过 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  }}

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 中，我的建议是使用@PostMappingor @DeleteMappingannotation 而不是@RequestMapping. 使用 as 'text' 的原因ResponseType是因为您提供的是ResponseEntity<>as ofString类型，并且默认情况下 Angular 将响应视为 JSON。

localStorage.removeItem('xAuthToken');此外，请记住在订阅该可观察对象时在响应中使用，并在ngOnDestroy()生命周期中取消订阅该可观察对象。