feat(frontend): store jwt in local storage

Author: kucharzyk

src/main/typescript/app/app.component.spec.ts

@@ -5,6 +5,9 @@ import {ClarityModule} from 'clarity-angular';
 import {RouterTestingModule} from '@angular/router/testing';
 import {ReactiveFormsModule, FormsModule} from '@angular/forms';
 import {CoreModule} from './core/core.module';
+import {BaseRequestOptions, Http, ConnectionBackend, RequestOptions} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {AuthService} from './core/store/auth/auth.service';
 
 describe('AppComponent', () => {
 
@@ -23,6 +26,18 @@ describe('AppComponent', () => {
         ReactiveFormsModule,
         ClarityModule.forRoot(),
         RouterTestingModule
+      ],
+      providers: [
+        BaseRequestOptions,
+        MockBackend,
+        {
+          provide: Http,
+          useFactory: function (backend: ConnectionBackend, defaultOptions: RequestOptions) {
+            return new Http(backend, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        AuthService
       ]
     });
 

src/main/typescript/app/app.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {AuthService} from './core/store/auth/auth.service';
 
 @Component({
   selector: 'shardis-root',
@@ -7,10 +8,11 @@ import {Component, OnInit} from '@angular/core';
 })
 export class AppComponent implements OnInit {
 
-  constructor() {
+  constructor(private authService: AuthService) {
   }
 
   ngOnInit() {
+    this.authService.dispatchToken();
   }
 
 }

src/main/typescript/app/core/store/auth/auth.service.ts

@@ -5,11 +5,15 @@ import {RootState} from '../index';
 import {Observable} from 'rxjs/Observable';
 import {LogoutAction, ProcessTokenAction, AuthErrorAction} from './auth.actions';
 import {go} from '@ngrx/router-store';
+import {LocalStorage} from 'ng2-webstorage';
 
 
 @Injectable()
 export class AuthService {
 
+  @LocalStorage("token")
+  private jwtToken: string;
+
   private authenticated$: Observable<boolean>;
 
   public static decodeAccessToken(access_token: string) {
@@ -20,8 +24,10 @@ export class AuthService {
     this.authenticated$ = store.select(s => s.auth.authenticated);
   }
 
-  public isAuthenticated(): Observable<boolean> {
-    return this.authenticated$;
+  public dispatchToken() {
+    if (!!this.jwtToken) {
+      this.store.dispatch(new ProcessTokenAction(this.jwtToken));
+    }
   }
 
   public authenticate(username: string, password: string): void {
@@ -46,9 +52,8 @@ export class AuthService {
       .post('/api/authentication', payload, {headers: headers})
       .subscribe(
         data => {
-          const jwtToken = data.text();
-          localStorage.setItem('tokenData', jwtToken);
-          this.store.dispatch(new ProcessTokenAction(jwtToken));
+          this.jwtToken = data.text();
+          this.dispatchToken();
           this.store.dispatch(go('/'));
         },
         err => {
@@ -61,7 +66,7 @@ export class AuthService {
   }
 
   public logout(): void {
-    localStorage.removeItem('tokenData');
+    this.jwtToken = null;
     this.store.dispatch(new LogoutAction());
   }
 

src/main/typescript/app/core/store/index.ts

@@ -24,7 +24,7 @@ const reducers = {
 
 const developmentReducer: ActionReducer<RootState> = compose(
   storeFreeze,
-  localStorageSync(['counter', 'auth', 'router'], true),
+  localStorageSync(['counter', 'router'], true),
   combineReducers)(reducers);
 
 const productionReducer: ActionReducer<RootState> = compose(combineReducers)(reducers);

src/main/typescript/app/main/main-view/main-view.component.html

@@ -13,9 +13,12 @@
       <li class="nav-item">
         <a class="nav-link" href="#" [routerLink]="['/']" [routerLinkActive]="'/active'">Home</a>
       </li>
-      <li class="nav-item">
+      <li class="nav-item" *ngIf="!(authenticated$ | async)">
         <a class="nav-link" href="#" [routerLink]="['/login']" [routerLinkActive]="'/login'">Login</a>
       </li>
+      <li class="nav-item" *ngIf="authenticated$ | async">
+        <a class="nav-link" href="#" (click)="logout()">Logout</a>
+      </li>
     </ul>
   </nav>
   <div class="content-container">

src/main/typescript/app/main/main-view/main-view.component.spec.ts

@@ -6,6 +6,9 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CoreModule} from '../../core/core.module';
 import {CounterModule} from '../../counter/counter.module';
 import {ClarityModule} from 'clarity-angular';
+import {BaseRequestOptions, Http, RequestOptions, ConnectionBackend} from '@angular/http';
+import {MockBackend} from '@angular/http/testing';
+import {AuthService} from '../../core/store/auth/auth.service';
 
 describe('MainViewComponent', () => {
   let fixture: ComponentFixture<MainViewComponent>;
@@ -22,6 +25,18 @@ describe('MainViewComponent', () => {
         ReactiveFormsModule,
         ClarityModule.forRoot(),
         RouterTestingModule
+      ],
+      providers: [
+        BaseRequestOptions,
+        MockBackend,
+        {
+          provide: Http,
+          useFactory: function (backend: ConnectionBackend, defaultOptions: RequestOptions) {
+            return new Http(backend, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        AuthService
       ]
     })
       .compileComponents();

src/main/typescript/app/main/main-view/main-view.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Store} from '@ngrx/store';
 import {RootState} from '../../core/store/index';
 import {Observable} from 'rxjs/Observable';
+import {AuthService} from '../../core/store/auth/auth.service';
 
 @Component({
   selector: 'shardis-main-view',
@@ -11,13 +12,19 @@ import {Observable} from 'rxjs/Observable';
 export class MainViewComponent implements OnInit {
 
   title = 'shardis works!';
+  authenticated$: Observable<boolean>;
   userData$: Observable<any>;
 
-  constructor(private store: Store<RootState>) {
+  constructor(private store: Store<RootState>, private authService: AuthService) {
+    this.authenticated$ = store.select(s => s.auth.authenticated);
     this.userData$ = store.select(s => s.auth.userData);
   }
 
   ngOnInit() {
   }
 
+  public logout() {
+    this.authService.logout();
+  }
+
 }