在Angular中,可以使用localStorage或sessionStorage来保存JWT令牌。下面是一个解决方案的代码示例:
login(username: string, password: string) {
// 调用登录API,获取JWT令牌
this.authService.login(username, password).subscribe(
(response: any) => {
// 将JWT令牌保存在本地存储中
localStorage.setItem('token', response.token);
// 导航到应用的主页或其他需要登录的页面
this.router.navigate(['/home']);
},
(error: any) => {
// 处理登录错误
}
);
}
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
ngOnInit() {
const token = localStorage.getItem('token');
if (token) {
// 设置默认的HTTP请求头
this.http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}
}
}
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest, next: HttpHandler): Observable> {
const token = localStorage.getItem('token');
if (token) {
// 添加Authorization头
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next.handle(request);
}
}
@NgModule({
// ...
providers: [
// ...
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
]
})
export class AppModule {}
通过以上步骤,JWT令牌将会在第一次登录成功后保存在本地存储中,并在应用初始化时自动设置为默认的HTTP请求头。