- add TokenInterceptor

- add fake auth service

Author: Sergey Matvyenko

src/app/app.component.ts

@@ -1,9 +1,15 @@
 import { Component } from '@angular/core';
+import { AuthService } from './services';
 
 @Component({
   selector: 'app-root',
   template: '<router-outlet></router-outlet>'
 })
 export class AppComponent {
   title = 'Newsfeed-App';
+
+  constructor(auth: AuthService) {
+
+    auth.login();
+  }
 }

src/app/app.module.ts

@@ -1,10 +1,9 @@
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { RootStoreModule } from './root-store';
-import { FeedMockDataService } from './services';
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -14,6 +13,11 @@ import {CheckboxModule} from 'primeng/checkbox';
 import {DataScrollerModule} from 'primeng/datascroller';
 import {CarouselModule} from 'primeng/carousel';
 import {ProgressSpinnerModule} from 'primeng/progressspinner';
+import {MessagesModule} from 'primeng/messages';
+import {MessageModule} from 'primeng/message';
+
+// services
+import { FeedMockDataService, FeedService, AuthService, TokenInterceptor } from './services';
 
 // components
 import { FeedListComponent } from './components/feed-list/feed-list.component';
@@ -28,8 +32,6 @@ import { AuthorsListComponent } from './components/authors-list/authors-list.com
 
 
 
-
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -54,9 +56,19 @@ import { AuthorsListComponent } from './components/authors-list/authors-list.com
     DataScrollerModule,
     CarouselModule,
     CheckboxModule,
-    ProgressSpinnerModule
+    ProgressSpinnerModule,
+    MessagesModule,
+    MessageModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: TokenInterceptor,
+      multi: true
+    },
+    FeedService,
+    AuthService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/feed-list/feed-list.component.html

@@ -1,5 +1,5 @@
 <!--component html goes here -->
-<div *ngIf="!(isLoading$ | async)">
+<div *ngIf="!(isLoading$ | async) && !(error$ | async)">
 
     <!-- Filter menu -->
     <app-feed-menu 
@@ -27,6 +27,6 @@
 </div>
 
 <!-- errors -->
-<div *ngIf="(error$ | async)">
-    An error occurred: {{(error$ | async) | json}}
-</div>
+<div *ngIf="(error$ | async)" class="center">
+    <p-message severity="error" style="font-size: 18px; font-weight: 600;" text="{{(error$ | async).message}}"></p-message>    
+</div>

src/app/services/auth.service.ts

@@ -0,0 +1,18 @@
+import { Injectable, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Injectable()
+export class AuthService  {
+
+
+    public login(): void {
+
+        this.setSession({accessToken: 'some_fake_token' });
+    }
+
+    private setSession(authResult): void {
+
+        // Set fake token
+        localStorage.setItem('access_token', authResult.accessToken);
+    }
+}

src/app/services/feed.service.ts

@@ -5,9 +5,7 @@ import { map } from 'rxjs/operators';
 import { ContentModel } from '../models';
 import { environment } from '../../environments/environment';
 
-@Injectable({
-  providedIn: 'root'
-})
+@Injectable()
 export class FeedService {
 
   private baseUrl: String;

src/app/services/index.ts

@@ -1,2 +1,4 @@
 export * from './feed.service';
 export * from './feed-mock.service';
+export * from './auth.service';
+export * from './token.interceptor';

src/app/services/token.interceptor.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { HttpResponse } from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+
+    constructor() {}
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+        const token: string = localStorage.getItem('access_token');
+        console.log(token);
+        console.log(req);
+
+        if (token === null) {
+            return next.handle(req);
+        } else {
+            const authHeader = 'Bearer ' + token;
+            const authReq = req.clone({ headers: req.headers.set('Authorization', authHeader) });
+            console.log(authReq);
+            return next.handle(authReq);
+        }
+    }
+
+}