Как ввести http-перехватчик в сервис

Question

auth-interceptor.ts

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';


@Injectable()

export class AuthInterceptor implements HttpInterceptor {

constructor (private router : Router) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (localStorage.getItem('user') != null) {
        const clonedReq = req.clone({
            headers: req.headers.set('Authorization', 'Bearer' + localStorage.getItem('user'))
        });
        return next.handle(clonedReq).pipe(
            tap(
                succ => { },
                err => {
                    if (err.status == 401) {
                        localStorage.removeItem('user');
                        this.router.navigateByUrl('/login');
                    }
                }
            )
        )
    }
    else {
        return next.handle(req.clone());
    }
}
}

service.ts

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient, HttpBackend, HttpErrorResponse } from 
'@angular/common/http';
import { User } from '../model/user';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
  })   
 export class UserService {
serverUrl = 'http://localhost:3000/api/user';
 errorData = {};

 httpOptions = {
    headers: new HttpHeaders({'x-access-token' localStorage.getItem('user')})
 };

 private http: HttpClient
 constructor(handler : HttpBackend) { 
  this.http = new HttpClient(handler)
 }

  addUser(formData) {
return this.http.post<User>(`${this.serverUrl}`, formData, 
 this.httpOptions).pipe(
  catchError(this.handleError)
  );
 }

 getUser() {
return this.http.get<User>(`${this.serverUrl}`, this.httpOptions).pipe(
  catchError(this.handleError)
);
  }

Я хочу ввести http-перехватчик в службу. Я запутался, как вводить это. Мне это нужно, потому что я сделал аутентификацию с использованием токена jwt. если указан токен jwt, то будет запущен api, который также должен быть реализован во внешнем интерфейсе. Я использовал этот auth.interceptor для установки токена jwt в заголовке, но я не знаю, как внедрить его в службу. Может кто-нибудь, пожалуйста, помогите мне?

Answer 1

Я хочу ввести http-перехватчик в сервис. Я запутался, как внедрить его.

В ваших app.module.ts добавьте перехватчики в массив провайдера, как показано ниже: ~

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    AuthService, // get the token from here 
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    UserService
  ]
})

В случае, если вам нужен доступ к AuthService в вашем AuthInterceptor для доступа к токену, вы должны внедрить его в конструктор AuthInterceptor и использовать его, как показано ниже: ~

import { Injectable, Injector } from '@angular/core';

export class AuthInterceptor implements HttpInterceptor {
  constructor(
    private injector: Injector,
    private router: Router
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Intercepted!', req);
    const authService = this.injector.get(AuthService);
    // something like this
    const copiedReq = req.clone({
      headers: req.headers.set(
        'authorization', 'Bearer ' + authService.token
      )
    });
    // Rest of the logic..
  }
}

(ваш AuthService может получить токен, а затем вы можете добавить его в localStorage, и затем вы можете приступить к реализации)

Пример аутентификации JWT Рабочее демонстрационное приложение STACKBLITZ

Надеюсь, это поможет!