使用 jwt 对 Api 进行 Angular5 身份验证 [英] Angular5 Authentication to Api with jwt
问题描述
我有一个可通过 jwt 令牌访问的 API.
I have an api accessible through an jwt token.
我有 postman 和 curl 的预期结果(curl -X POST http://localhost/api/login_check -d _username=login -d _password=pass
),但没有 angular.
I have the expected result with postman and curl (curl -X POST http://localhost/api/login_check -d _username=login -d _password=pass
) but not with angular.
与邮递员成功的标头请求:
Successful header request with postman:
POST /api/login_check
cache-control: no-cache
postman-token: 2b4a6be8-5c3d-4c66-99f9-daa49572d4bf
user-agent: PostmanRuntime/7.1.1
accept: */*
host: localhost
cookie: PHPSESSID=06u39ri0rr2i2sgdkjr451d6tj
accept-encoding: gzip, deflate
content-type: multipart/form-data; boundary=--------------------------825758704558259093486061
content-length: 287
这是我的配置:
Angular CLI: 1.5.5
Node: 9.2.0
OS: linux x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1
这是我的服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const API_URL = 'http://localhost/api';
@Injectable()
export class SecurityService {
constructor(private http: HttpClient) {
}
login(username: string, password: string) {
let url = `${API_URL}/login_check`;
return this.http.post(
url,
{_username: username, _password: password },
).subscribe(
(response) => {
console.log(response);
}
);
}
}
此调用返回 401 错误,凭据无效.我曾尝试使用 contentType: 'application/x-www-form-urlencoded' 添加标题,但仍然出现相同的错误.
This call return me an 401 error, invalid credentials. I had try to add header with contentType: 'application/x-www-form-urlencoded' but still the same error.
我是 Angular 的新手,不明白如何进行这个身份验证调用.
I am new to Angular, and do not understand how to proceed this authentification call.
谢谢
推荐答案
这可能是因为 http.post 将内容发布为 json,但您的服务器正在等待 x-www-form-urlencoded (这就是您正在使用CURL -d 选项)
It's probably because http.post posts the content as json, but your server is expecting x-www-form-urlencoded (which is what you are doing with the CURL -d option)
您需要设置正确的标题
let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
并且您需要设置正确的正文.
And you need to set the correct body.
您可以手动完成,也可以使用 URLSearchParams
You can either do it manually, or use URLSearchParams
let body = new URLSearchParams();
body.set('_username', username);
body.set('_password', password);
this.http.post(this.loginUrl, body.toString(), options)
如果你想手动设置body,使用
If you want to set the body manually, use
let body = '_username=username&_password=password';
this.http.post(this.loginUrl, body, options)
这篇关于使用 jwt 对 Api 进行 Angular5 身份验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!