Angular 6 中的 AuthHttp(从 Angular2 迁移到 Angular6)
Posted
技术标签:
【中文标题】Angular 6 中的 AuthHttp(从 Angular2 迁移到 Angular6)【英文标题】:AuthHttp in Angular 6 (Migration from Angular2 to Angular6) 【发布时间】:2019-03-30 20:07:44 【问题描述】:我最近将我的应用程序从 Angular2 迁移到 Angular6
由于 Angular2-JWT,我的构建失败,因此我将其升级到 @auth0/angular-jwt
现在我在更新我的代码时卡住了,因为 AuthHTTP 和 AuthConfig 已被弃用。
我的 security.module.ts 有一个 factory.ts。而且我必须向我的 security.module.ts 返回一个 New AuthHttp。
export function AuthHttpServiceFactory( http: Http, options: RequestOptions)
const accessToken = this.accessTokenService.getAccessToken();
const userInfoToken = this.accessTokenService.getUserInfoToken();
return new AuthHttp(
new AuthConfig(
tokenName: 'token',
tokenGetter: (() => accessToken),
globalHeaders: [ 'Content-Type': 'application/json' , 'userinfotoken': userInfoToken ],
), http, options);
现在我在返回 AuthHttp 时遇到错误。
我的Security.Module.ts如下。
@NgModule(
providers: [
LocalStorageService,
provide: AuthHttp,
useFactory: AuthHttpServiceFactory,
deps: [Http, RequestOptions]
]
)
我在提供时也遇到错误:AuthHttp。
感谢任何帮助。
【问题讨论】:
恕我直言,AuthHttp 是相当无用的服务。我很久以前就在使用它,然后改用 Angular 的 HttpClient 来自己设置标头(这几乎是您需要做的所有事情)。更少的依赖和更清晰的代码。 感谢您的回答。但我不知道如何使用 HttpClient 而不是 AuthHttp。你能告诉我怎么做吗? HttpClient 是 Angular 的内置模块/服务,用于执行 HTTP 请求。很可能某些版本的 AuthHttp 也在使用它。试试看这里angular.io/guide/http 如果您需要全局添加身份验证标头,您不妨创建自己的服务,在其中使用 HttpClient,添加标头并在您的应用程序中使用它。您基本上会创建自己的“AuthHttp”。 Import "Http, RequestOptions and Headers from @angular/http 并添加请求选项到响应中。Header Authorization 应该包含 token.let headers = new Headers(); let token = localStorage.getItem('token '); headers.append('Authorization', 'Bearer' + token) let options = new RequestOptions( headers: headers ); 【参考方案1】:这是使用 HttpClient 和 HttpHeaders 作为服务添加身份验证的方法
import Injectable from '@angular/core';
import HttpClient, HttpHeaders from '@angular/common/http';
@Injectable(
providedIn: 'root'
)
export class VehicleService
headers;
private readonly vehicleEndpoint = 'api/vehicles';
constructor(private http: HttpClient)
create(vehicle)
return this.http.post(this.vehicleEndpoint, vehicle, this.addHeaders());
addHeaders()
var access_token = localStorage.getItem('access_token');
return headers: new HttpHeaders().set("Authorization", `Bearer
$access_token`) ;
access_token 是 Json Web 令牌。
https://angular.io/api/common/http/HttpHeaders
https://angular.io/guide/http
【讨论】:
以上是关于Angular 6 中的 AuthHttp(从 Angular2 迁移到 Angular6)的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 JWT AuthHttp 错误 401 未捕获
Angular2-jwt - AuthHttp,刷新令牌,把它们放在一起