请求拦截器
登录令牌注入
token.interceptor.ts
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private injector: Injector) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const auth = this.injector.get(AuthService);
const clonedRequest = request.clone({
headers: auth.getTokenHeader(request),
url: this.fixUrl(request.url),
params: request.params
});
return next.handle(clonedRequest);
}
private fixUrl(url: string) {
if (url.indexOf('http://') >= 0 || url.indexOf('https://') >= 0) {
return url;
}
return environment.apiEndpoint + url;
}
}
响应拦截器
例如登录令牌失效
reponse.interceptor.ts
@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
constructor(private injector: Injector) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(catchError((event: HttpEvent<any>) => {
if (event instanceof HttpErrorResponse) {
if (event.status === 401) {
const auth = this.injector.get(AuthService);
auth.logoutUser();
}
}
return throwError(event);
}));
}
}
使用
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }, // 使用请求拦截器
{ provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }, // 使用响应拦截器
],
})
export class ThemeModule {
static forRoot(): ModuleWithProviders<ThemeModule> {
return {
ngModule: ThemeModule
};
}
}
AuthService
const USER_KEY = 'user';
@Injectable()
export class AuthService {
constructor(
private http: HttpClient,
@Inject(PLATFORM_ID) private platformId: any) {}
/**
* 清除本地的token
*/
public logoutUser() {
if (isPlatformBrowser(this.platformId)) {
localStorage.clear();
}
this.store.dispatch(this.actions.logoutSuccess());
}
/**
* 生成请求头
* @returns HttpHeaders
*/
getTokenHeader(request: HttpRequest<any>): HttpHeaders {
if (this.getUserToken()) {
return new HttpHeaders({
'Content-Type': 'application/vnd.api+json',
Authorization: `Bearer ${this.getUserToken()}`,
Accept: '*/*'
});
}
return new HttpHeaders({
'Content-Type': 'application/vnd.api+json',
Accept: '*/*'
});
}
private setTokenInLocalStorage(user: any, keyName: string): void {
const jsonData = JSON.stringify(user);
if (isPlatformBrowser(this.platformId)) {
localStorage.setItem(keyName, jsonData);
}
}
public getUserToken() {
if (isPlatformBrowser(this.platformId)) {
const user: IUser = JSON.parse(localStorage.getItem(USER_KEY));
return user ? user.token : null;
} else {
return null;
}
}
}
转载请保留原文链接: https://zodream.cn/blog/id/178.html