ng4-http

Angular 2/4 Http Interceptors and Authentication

This package provides two major missing features in angular2: Http Interceptors and Authentication.

Http Interceptors

Http Interceptors provides you ability to intercept all requests and modify then, if necessary or retry them again.

Usage

• Import Interceptor interface from the package and create and provide your own Interceptor, e.g.:

import { Interceptor } from 'ng2-http-auth/http';

@Injectable()
export class CustomInterceptor implements Interceptor {

  constructor(private http: Http) {}

  /**
   * Request interceptor.
   * @param {Request|string} url
   * @param {RequestOptionsArgs} options
   * @returns {Observable}
   */
  public request({ url, options }: RequestInterceptorOptions): RequestInterceptorOptions {
    const urlString = url instanceof Request ? (<Request>url).url : url;

    console.log('Request:', urlString);

    return { url, options };
  }

  public responseError({ url, options, response }: ResponseInterceptorOptions): RequestInterceptorOptions {
    const urlString = url instanceof Request ? (<Request>url).url : url;
    console.log('Response:', urlString);

    return { url, options, response };
  }
}

• Register your custom interceptor by injecting InterceptorStore into your module, e.g.:

import { InterceptorStore } from 'ng2-http-auth/http';

@NgModule({
  providers: [ CustomInterceptor ]
})
export class AuthModule {
  constructor(interceptorStore: InterceptorStore, customInterceptor: CustomInterceptor) {
    interceptorStore.register(customInterceptor);
  }
}

• Use HttpModule and Http service from the package instead of native one, e.g.:

import { HttpModule } from 'ng2-http-auth/http';

@NgModule({
  imports: [ HttpModule ]
})
export class AuthModule {
}

Authentication module

Authentication modules provides ability to attach authentication token automatically to the headers (through http interceptors), refresh token functionality, guards for protected or public pages and more.

Usage

• Import AuthService interface to implement it with your custom Authentication service, e.g.:

import { AuthService } from 'ng2-http-auth/auth';

@Injectable()
export class AuthenticationService implements AuthService {

  constructor(private http: Http) {
  }

  isAuthorized(): Observable<boolean> {
    const isAuthorized: boolean = !!localStorage.getItem('accessToken');

    return Observable.of(isAuthorized);
  }

  logout(): void {
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    location.reload(true);
  }

  getAccessToken(): Observable<string> {
    const accessToken: string = localStorage.getItem('accessToken');

    return Observable.of(accessToken);
  }

  refreshToken(): Observable<any> {
    const refreshToken: string = localStorage.getItem('refreshToken');

    return this.http
      .post('http://localhost:3001/refresh-token', { refreshToken })
      .catch(() => this.logout())
  }

  refreshShouldHappen(response: Response): boolean {
    return response.status === 401;
  }

  isRefreshTokenRequest(url: string): boolean {
    return url.endsWith('refresh-token');
  }

}

• Specify PublicGuard for public routes and ProtectedGuard for protected respectively, e.g.:

const publicRoutes: Routes = [
  { path: '', component: LoginComponent, canActivate: [ PublicGuard ] }
];

const protectedRoutes: Routes = [
  {
    path: '',
    component: ProtectedComponent,
    canActivate: [ ProtectedGuard ],
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
    ]
  }
];

• Create additional AuthenticationModule and provide important providers and imports, e.g.:

import { NgModule } from '@angular/core';
import { AuthModule, AUTH_SERVICE, PUBLIC_FALLBACK_PAGE_URI, PROTECTED_FALLBACK_PAGE_URI } from 'ng2-http-auth/auth';

import { AuthenticationService } from './authentication.service';

@NgModule({
    imports: [ AuthModule ],
    providers: [
      { provide: PROTECTED_FALLBACK_PAGE_URI, useValue: '/' },
      { provide: PUBLIC_FALLBACK_PAGE_URI, useValue: '/login' },
      { provide: AUTH_SERVICE, useClass: AuthenticationService }
    ]
})
export class AuthenticationModule {

}

where,

• PROTECTED_FALLBACK_PAGE_URI - main protected page to be redirected to, in case if user will reach public route, that is protected by PublicGuard and will be authenticated

• PUBLIC_FALLBACK_PAGE_URI - main public page to be redirected to, in case if user will reach protected route, that is protected by ProtectedGuard and won't be authenticated

• AUTH_SERVICE - Authentication service token providers

• Provide your AuthenticationModule in your AppModule