如何为每个 header 添加一个 json 网络令牌?
How do I add a json web token to each header?
所以我正在尝试使用 JSON 网络令牌进行身份验证,并且正在努力弄清楚如何将它们附加到 header 并根据请求发送它们。
我正在尝试使用 https://github.com/auth0/angular2-jwt 但我无法让它与 Angular 一起使用并放弃了,我想我可以弄清楚如何在每个请求中发送 JWT 或发送它在 header(最好是 header)。只是比我想象的要难一点。
这是我的登录名
submitLogin(username, password){
console.log(username);
console.log(password);
let body = {username, password};
this._loginService.authenticate(body).subscribe(
response => {
console.log(response);
localStorage.setItem('jwt', response);
this.router.navigate(['UserList']);
}
);
}
和我的login.service
authenticate(form_body){
return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
.map((response => response.json()));
}
我知道这些并不是真正需要的,但也许会有帮助!创建并存储此令牌后,我想做两件事,将其发送到 header 并提取我放入其中的到期日期。
部分Node.js登录码
var jwt = require('jsonwebtoken');
function createToken(user) {
return jwt.sign(user, "SUPER-SECRET", { expiresIn: 60*5 });
}
现在我只是想通过 angular 服务将其传递回具有此服务的节点。
getUsers(jwt){
headers.append('Authorization', jwt);
return this.http.get('/api/users/', {headers: headers})
.map((response => response.json().data));
}
JWT 是我在本地存储中的网络令牌,我通过我的组件传递给服务。
我在任何地方都没有错误,但是当它到达我的节点服务器时,我从未在 header 中收到它。
'content-type': 'application/json',
accept: '*/*',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-US,en;q=0.8',
cookie: 'connect.sid=s%3Alh2I8i7DIugrasdfatcPEEybzK8ZJla92IUvt.aTUQ9U17MBLLfZlEET9E1gXySRQYvjOE157DZuAC15I',
'if-none-match': 'W/"38b-jS9aafagadfasdhnN17vamSnTYDT6TvQ"' }
我看到有几个选项可以为每个请求透明地设置 header:
- 实现一个 HttpClient 服务来代替默认的 Http 服务。
- 提供您自己的 RequestOptions 实现 class
- 自行覆盖 Http class
这样您就可以在一处设置 header,这会影响您的 HTTP 调用。
查看以下问题:
这里是Angular获取计划的代码示例,你可以这样写,
$scope.getPlans = function(){
$http({
url: '/api/plans',
method: 'get',
headers:{
'x-access-token': $rootScope.token
}
}).then(function(response){
$scope.plans = response.data;
});
}
在你的服务器上,你可以这样做,
var jwt = require('jsonwebtoken'); // used to create, sign, and verify tokens
var config = require('./config'); // get our config file
var secret = {superSecret: config.secret}; // secret variable
// route middleware to verify a token. This code will be put in routes before the route code is executed.
PlansController.use(function(req, res, next) {
// check header or url parameters or post parameters for token
var token = req.body.token || req.query.token || req.headers['x-access-token'];
// If token is there, then decode token
if (token) {
// verifies secret and checks exp
jwt.verify(token, secret.superSecret, function(err, decoded) {
if (err) {
return res.json({ success: false, message: 'Failed to authenticate token.' });
} else {
// if everything is good, save to incoming request for use in other routes
req.decoded = decoded;
next();
}
});
} else {
// if there is no token
// return an error
return res.status(403).send({
success: false,
message: 'No token provided.'
});
}
});
// Routes
PlansController.get('/', function(req, res){
Plan.find({}, function(err, plans){
res.json(plans);
});
});
如果还有不明白的,可以在我的博客post这里查看详情,Node API Authentication with JSON Web Tokens - the right way。
创建自定义 http class 并覆盖 request
方法以在每个 http 请求中添加令牌。
http.service.ts
import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class HttpService extends Http {
constructor (backend: XHRBackend, options: RequestOptions) {
let token = localStorage.getItem('auth_token'); // your custom token getter function here
options.headers.set('Authorization', `Bearer ${token}`);
super(backend, options);
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem('auth_token');
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
// let's make option object
options = {headers: new Headers()};
}
options.headers.set('Authorization', `Bearer ${token}`);
} else {
// we have to add the token to the url object
url.headers.set('Authorization', `Bearer ${token}`);
}
return super.request(url, options).catch(this.catchAuthError(this));
}
private catchAuthError (self: HttpService) {
// we have to pass HttpService's own instance here as `self`
return (res: Response) => {
console.log(res);
if (res.status === 401 || res.status === 403) {
// if not authenticated
console.log(res);
}
return Observable.throw(res);
};
}
}
现在,我们需要配置我们的主模块来为我们的自定义 http class 提供 XHRBackend。在您的主模块声明中,将以下内容添加到提供程序数组:
app.module.ts
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
imports: [..],
providers: [
{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
},
deps: [XHRBackend, RequestOptions]
}
],
bootstrap: [ AppComponent ]
})
之后,您现在可以在您的服务中使用您的自定义 http 提供程序。例如:
user.service.ts
import { Injectable } from '@angular/core';
import {HttpService} from './http.service';
@Injectable()
class UserService {
constructor (private http: HttpService) {}
// token will added automatically to get request header
getUser (id: number) {
return this.http.get(`/users/${id}`).map((res) => {
return res.json();
} );
}
}
所以我正在尝试使用 JSON 网络令牌进行身份验证,并且正在努力弄清楚如何将它们附加到 header 并根据请求发送它们。
我正在尝试使用 https://github.com/auth0/angular2-jwt 但我无法让它与 Angular 一起使用并放弃了,我想我可以弄清楚如何在每个请求中发送 JWT 或发送它在 header(最好是 header)。只是比我想象的要难一点。
这是我的登录名
submitLogin(username, password){
console.log(username);
console.log(password);
let body = {username, password};
this._loginService.authenticate(body).subscribe(
response => {
console.log(response);
localStorage.setItem('jwt', response);
this.router.navigate(['UserList']);
}
);
}
和我的login.service
authenticate(form_body){
return this.http.post('/login', JSON.stringify(form_body), {headers: headers})
.map((response => response.json()));
}
我知道这些并不是真正需要的,但也许会有帮助!创建并存储此令牌后,我想做两件事,将其发送到 header 并提取我放入其中的到期日期。
部分Node.js登录码
var jwt = require('jsonwebtoken');
function createToken(user) {
return jwt.sign(user, "SUPER-SECRET", { expiresIn: 60*5 });
}
现在我只是想通过 angular 服务将其传递回具有此服务的节点。
getUsers(jwt){
headers.append('Authorization', jwt);
return this.http.get('/api/users/', {headers: headers})
.map((response => response.json().data));
}
JWT 是我在本地存储中的网络令牌,我通过我的组件传递给服务。
我在任何地方都没有错误,但是当它到达我的节点服务器时,我从未在 header 中收到它。
'content-type': 'application/json',
accept: '*/*',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-US,en;q=0.8',
cookie: 'connect.sid=s%3Alh2I8i7DIugrasdfatcPEEybzK8ZJla92IUvt.aTUQ9U17MBLLfZlEET9E1gXySRQYvjOE157DZuAC15I',
'if-none-match': 'W/"38b-jS9aafagadfasdhnN17vamSnTYDT6TvQ"' }
我看到有几个选项可以为每个请求透明地设置 header:
- 实现一个 HttpClient 服务来代替默认的 Http 服务。
- 提供您自己的 RequestOptions 实现 class
- 自行覆盖 Http class
这样您就可以在一处设置 header,这会影响您的 HTTP 调用。
查看以下问题:
这里是Angular获取计划的代码示例,你可以这样写,
$scope.getPlans = function(){
$http({
url: '/api/plans',
method: 'get',
headers:{
'x-access-token': $rootScope.token
}
}).then(function(response){
$scope.plans = response.data;
});
}
在你的服务器上,你可以这样做,
var jwt = require('jsonwebtoken'); // used to create, sign, and verify tokens
var config = require('./config'); // get our config file
var secret = {superSecret: config.secret}; // secret variable
// route middleware to verify a token. This code will be put in routes before the route code is executed.
PlansController.use(function(req, res, next) {
// check header or url parameters or post parameters for token
var token = req.body.token || req.query.token || req.headers['x-access-token'];
// If token is there, then decode token
if (token) {
// verifies secret and checks exp
jwt.verify(token, secret.superSecret, function(err, decoded) {
if (err) {
return res.json({ success: false, message: 'Failed to authenticate token.' });
} else {
// if everything is good, save to incoming request for use in other routes
req.decoded = decoded;
next();
}
});
} else {
// if there is no token
// return an error
return res.status(403).send({
success: false,
message: 'No token provided.'
});
}
});
// Routes
PlansController.get('/', function(req, res){
Plan.find({}, function(err, plans){
res.json(plans);
});
});
如果还有不明白的,可以在我的博客post这里查看详情,Node API Authentication with JSON Web Tokens - the right way。
创建自定义 http class 并覆盖 request
方法以在每个 http 请求中添加令牌。
http.service.ts
import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class HttpService extends Http {
constructor (backend: XHRBackend, options: RequestOptions) {
let token = localStorage.getItem('auth_token'); // your custom token getter function here
options.headers.set('Authorization', `Bearer ${token}`);
super(backend, options);
}
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem('auth_token');
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
// let's make option object
options = {headers: new Headers()};
}
options.headers.set('Authorization', `Bearer ${token}`);
} else {
// we have to add the token to the url object
url.headers.set('Authorization', `Bearer ${token}`);
}
return super.request(url, options).catch(this.catchAuthError(this));
}
private catchAuthError (self: HttpService) {
// we have to pass HttpService's own instance here as `self`
return (res: Response) => {
console.log(res);
if (res.status === 401 || res.status === 403) {
// if not authenticated
console.log(res);
}
return Observable.throw(res);
};
}
}
现在,我们需要配置我们的主模块来为我们的自定义 http class 提供 XHRBackend。在您的主模块声明中,将以下内容添加到提供程序数组:
app.module.ts
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
imports: [..],
providers: [
{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
},
deps: [XHRBackend, RequestOptions]
}
],
bootstrap: [ AppComponent ]
})
之后,您现在可以在您的服务中使用您的自定义 http 提供程序。例如:
user.service.ts
import { Injectable } from '@angular/core';
import {HttpService} from './http.service';
@Injectable()
class UserService {
constructor (private http: HttpService) {}
// token will added automatically to get request header
getUser (id: number) {
return this.http.get(`/users/${id}`).map((res) => {
return res.json();
} );
}
}