Difference between revisions of "Example of Http Interceptor for login authentication"

From Basef
Jump to: navigation, search
 
Line 54: Line 54:
 
</source>
 
</source>
  
[[Category: AngularJS2]]
+
[[Category: Angular]]

Latest revision as of 10:38, 27 January 2020

An Http Interceptor can be used to verify if the user is logged in or to inject http headers to every http request.

In the example above, we are injecting a Authorization http header to every request:

auth-interceptor.js

import { Injectable, Injector } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { LoginService } from './login.service';
 
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
 
  constructor(private injector: Injector) {
 
  }
 
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const loginService = this.injector.get(LoginService);
 
    if (loginService.isLoggedIn()) {
      const authRequest = request.clone(
        { setHeaders:{'Authorization': `Bearer ${loginService.getUser().accessToken}`}});
 
      return next.handle(authRequest);
    } else {
      return next.handle(request);
    }
  }
}

In your module:

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from "./login/auth.interceptor";
 
@NgModule({
  ...
  providers: [
    ...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    },
    ...
  ]
  ...
})