[英]Web tokens in Angular 2+
我正在通過登錄組件將POST請求發送到后端REST API。 我在響應標頭中獲得了x-auth令牌。 如何獲取和存儲此令牌,以便在用戶登錄會話期間將其用於所有其他API請求? 干杯
localStorage.setItem('token', response.access_token);
這是我使用Angular 5的方法:
我的LoginService:
import { Injectable } from '@angular/core';
import { HttpHeaders, HttpParams } from '@angular/common/http';
import { HttpService } from '../services/http.service';
@Injectable()
export class LoginService{
constructor(private _http: HttpService) {
}
login(user: string, pass: string) {
const params = new HttpParams()
.append('grant_type', 'password')
.append('username', user)
.append('password', pass);
const headers = new HttpHeaders()
.set('Content-Type', 'application/x-www-form-urlencoded');
return this._http.post('login', params, { headers: headers });
}
}
我的登錄組件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LoginService } from '../../services';
@Component({
selector: 'app-login',
templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
public pageTitle = 'User login';
errorMessage = '';
loginFormGroup: FormGroup;
constructor(
private fb: FormBuilder,
private _loginService: LoginService) { }
ngOnInit() {
this.formBuild();
}
formBuild() {
this.loginFormGroup = this.fb.group({
loginUser: ['', [Validators.required]],
loginPass: ['', [Validators.required]],
});
}
onLogin() {
let response: any;
this._loginService.login(this.loginFormGroup.value.loginUser, this.loginFormGroup.value.loginPass)
.subscribe(
response => { response= response; },
error => { this.errorMessage = <any>error; },
() => {
localStorage.setItem('token', response.access_token);
});
}
}
我將令牌保存在localeStorage中。
我已經創建了用於此令牌的攔截器:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('token');
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(request);
}
}
export const TokenInterceptorProvider = {
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
};
該解決方案來自Angular 5和HTTPClient。 如果您僅需要Angular 2的解決方案,請告訴我,我會將其發布給您。
將您收到的令牌存儲在Web瀏覽器的本地存儲中,並使用http攔截器從所有響應中刪除令牌並將令牌添加到所有請求。
使用NgCookie
模塊,您可以設置如下:
$cookies.put("token","your_response_val");
之后,以供進一步使用。... $cookies.get ()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.