在 Angular2/4/5 中，如何基于基于令牌的身份验证安全地调用 WebAPI 操作

Question

我需要知道，在Angular FrontEnd中获取令牌后，如何安全地调用WebAPI操作方法。下面是我的登录组件代码，在发送用户名和密码后，我将用户令牌设置为本地存储。然后我导航到主页。此处使用的所有代码均基于此视频教程。也有一些轻微的修改，因为我也在HTML中使用Ionic代码

登录.ts

constructor(private userService : UserService, public navCtrl: NavController) { } 
OnSubmit(userName,password){
this.userService.userAuthentication(userName,password).subscribe((data : any)=>{
localStorage.setItem('userToken',data.access_token);
//this.router.navigate(['/home']);
this.navCtrl.push(HomeComponent);
},
(err : HttpErrorResponse)=>{
this.isLoginError = true;
});
}

在下面的代码中，我根据上面给定的用户名和密码获取用户详细信息。请关注以下组件的OnSubmit()方法。这是基于用户令牌提交另一种形式的 Home 组件的方法/事件，我需要您的帮助

首页

constructor(public navCtrl: NavController, private userService: UserService) { }    
ngOnInit() {
this.resetForm();
this.userService.getUserClaims().subscribe((data: any) => {
this.userClaims = data;    
});        
}
OnSubmit(form: NgForm) {
this.userService.UserForm(form.value)
.subscribe((data: any) => {
localStorage.getItem('userToken');
if (data.Succeeded == true) {
// this.resetForm(form);
return "hello";
}
});      
}

请关注以下服务的用户表单方法，我需要您的帮助。

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UIHelperClass } from '../UIHelperClasses/UIHelperClass';
import { Person } from './person.model'; 
@Injectable()
export class UserService {
UserForm(person:Person){
const body: Person = {
FirstName: person.FirstName,
LastName: person.LastName
}
//var reqHeader = new HttpHeaders({'No-Auth':'True'});
var reqHeader = new HttpHeaders({'No-Auth':'False'});
//return this.http.post(this.rootUrl + '/api/User/Register', body,{headers : reqHeader});
return this.http.post(this.uihelper.CallWebAPIUrl("/api/User/AddUser"), body,{headers : reqHeader});        
}
userAuthentication(userName, password) {
var data = "username=" + userName + "&password=" + password + "&grant_type=password";
var reqHeader = new HttpHeaders({ 'Content-Type': 'application/x-www-urlencoded','No-Auth':'True' });
//return this.http.post(this.rootUrl + '/token', data, { headers: reqHeader });
return this.http.post(this.uihelper.CallWebAPIUrl("/token"), data, { headers: reqHeader });           
}
getUserClaims(){
//return  this.http.get(this.rootUrl+'/api/GetUserClaims');
return  this.http.get(this.uihelper.CallWebAPIUrl("/api/GetUserClaims"));
}
}

如何使用，下面的代码类型在上面的用户窗体服务方法。我需要保护我的请求/WebAPI(基于此令牌，我需要调用Web API。它可能是获取或发布请求)。我已经参考了本教程.js的 EmpService 以获取以下代码

user.service.ts

xxx=localStorage.getItem('userToken');
authHeaders: any[] = [];
if (xxx) {
this.authHeaders.Authorization = 'Bearer ' + xxx;
}

Answer 1

您可以使用angular2-jwt，它在Angular 5和httpClient中完美运行，令牌将在提供令牌来源(localStorage或redux存储)后自动添加到所有Http请求中：

export function tokenGetter() {
return localStorage.getItem('access_token');
}
@NgModule({
bootstrap: [AppComponent],
imports: [
HttpClientModule,
JwtModule.forRoot({
config: {
tokenGetter: tokenGetter,
whitelistedDomains: ['localhost:3001'] // token will be sent to these domains only 
}
})
]
})

例如，您可以添加HTTP拦截器以在登录调用的情况下删除令牌