fix angular error (needs to remove devxpress to make it simpler to demo)

Author: Rebolon

assets/js/form-devxpress-angular/src/app/shared/shared.module.ts

@@ -6,6 +6,8 @@ import {WizardListAuthorsComponent} from './wizard-list-authors/wizard-list-auth
 import {WizardListEditorsComponent} from './wizard-list-editors/wizard-list-editors.component';
 import {LoginComponent} from "./login/login.component";
 import {CommonModule} from '@angular/common';
+import {TokenService} from "../../services/token.service";
+import {environment} from "../../environments/environment";
 
 @NgModule({
     imports: [
@@ -28,6 +30,14 @@ import {CommonModule} from '@angular/common';
         WizardListEditorsComponent,
         WizardSumupComponent,
     ],
+    providers: [
+      {
+        provide: 'TokenServiceJwt',
+        useFactory: () => {
+          return new TokenService(environment.tokenKey)
+        }
+      }
+    ]
 })
 export class SharedModule {
 }

assets/js/form-devxpress-angular/src/environments/environment.prod.ts

@@ -6,4 +6,5 @@ export const environment = {
   rest: {
     baseUrl: `//${host}${apiPlatformPrefix}/`
   },
+  tokenKey: 'rememberMe'
 };

assets/js/form-devxpress-angular/src/environments/environment.ts

@@ -11,4 +11,5 @@ export const environment = {
   rest: {
     baseUrl: `//${host}${apiPlatformPrefix}/`
   },
+  tokenKey: 'rememberMe'
 };

assets/js/form-devxpress-angular/src/services/api.ts

@@ -1,10 +1,12 @@
-import { Injectable } from '@angular/core'
+import {Inject, Injectable} from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { Observable } from 'rxjs'
 import { environment } from '../environments/environment'
 import {apiPlatformPrefix, tokenJwtBearer} from '../../../lib/config'
 import { map, tap } from 'rxjs/operators'
 import {JwtInterceptorService} from "./jwt-interceptor";
+import {TokenService} from "./token.service";
+import {UserToken} from "./token.interface";
 
 @Injectable({
   providedIn: 'root'
@@ -20,7 +22,9 @@ export class ApiService {
         headers: {}
     }
 
-    constructor(protected http: HttpClient, protected jwtInterceptorService: JwtInterceptorService) { }
+    constructor(protected http: HttpClient, protected jwtInterceptorService: JwtInterceptorService, @Inject('TokenServiceJwt') protected tokenStorage: TokenService) {
+      this.enableJwtToken();
+    }
 
     get(path: string, options: Object = {}): Observable<any> {
         const init: {} = Object.assign(options, this.options)
@@ -73,4 +77,26 @@ export class ApiService {
 
         return uri
     }
+
+    enableCredentials() {
+        this.options.withCredentials = true;
+    }
+
+    disableCredentials() {
+        this.options.withCredentials = false;
+    }
+
+    enableJwtToken() {
+        if (this.tokenStorage.getAccessToken()) {
+            const user: UserToken = this.tokenStorage.getAccessToken();
+
+            if (user) {
+              this.jwtInterceptorService.setJwtToken(user.token)
+            }
+        }
+    }
+
+    disableJwtToken() {
+        this.jwtInterceptorService.setJwtToken("")
+    }
 }

assets/js/form-devxpress-angular/src/services/jwt-interceptor.ts

@@ -1,6 +1,14 @@
 import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse
+} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {map, catchError} from "rxjs/operators";
 import {tokenJwtBearer} from '../../../lib/config'
 
 @Injectable({
@@ -11,11 +19,30 @@ export class JwtInterceptorService implements HttpInterceptor {
   private token: string | null;
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    let clone = req;
+    let handle;
+
     if (this.token) {
-      const clone = req.clone({ setHeaders: { 'Authorization': `${tokenJwtBearer} ${this.token}` } });
-      return next.handle(clone);
+      clone = req.clone({ setHeaders: { 'Authorization': `${tokenJwtBearer} ${this.token}` } });
     }
-    return next.handle(req);
+
+    handle = next.handle(clone).pipe(
+      map((event: HttpEvent<any>) => {
+        if (event instanceof HttpResponse) {
+          // console.log('interceptor : event--->>>', event);
+          // this.errorDialogService.openDialog(event);
+        }
+        return event;
+      }),
+      catchError((error: HttpErrorResponse) => {
+        if (error.status === 403) {
+          // @todo ask for login modal maybe using an Observable, but is it this class responsability ? not sure
+        }
+
+        return throwError(error);
+      }));
+
+    return handle;
   }
 
   setJwtToken(token: string) {
@@ -26,7 +53,19 @@ export class JwtInterceptorService implements HttpInterceptor {
     this.token = token;
   }
 
+  getJwtToken() {
+    return this.token
+  }
+
   removeJwtToken() {
     this.token = null;
   }
+
+  readJwt(token) {
+    try {
+      return JSON.parse(atob(token.split('.')[1]));
+    } catch (e) {
+      return null;
+    }
+  }
 }

assets/js/form-devxpress-angular/src/services/token.interface.ts

@@ -0,0 +1,12 @@
+export interface UserToken {
+  token: string;
+  roles: [];
+}
+
+export interface TokenServiceI {
+  setAccessToken(token: string): TokenServiceI
+
+  getAccessToken(): UserToken
+
+  reset(): TokenServiceI
+}

assets/js/form-devxpress-angular/src/services/token.mock.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core'
+import {TokenServiceI} from "./token.interface";
+
+@Injectable()
+export class TokenMockService implements TokenServiceI {
+  protected token = null
+
+  constructor(private TOKEN_KEY: string = 'tokenKey') { }
+
+  setAccessToken(token: string): TokenServiceI {
+    this.token = token
+
+    return this
+  }
+
+  getAccessToken(): string {
+    return this.token
+  }
+
+  reset(): TokenServiceI {
+    this.token = null
+
+    return this
+  }
+}

assets/js/form-devxpress-angular/src/services/token.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core'
+import {TokenServiceI, UserToken} from "./token.interface";
+
+@Injectable()
+export class TokenService implements TokenServiceI {
+  constructor(private TOKEN_KEY: string = 'tokenKey') { }
+
+  setAccessToken(token: string): TokenServiceI {
+    localStorage.setItem(this.TOKEN_KEY, token)
+
+    return this
+  }
+
+  getAccessToken(): UserToken|null {
+    if (!localStorage) {
+      throw new Error('LocalStorage is not available in the current browser')
+    }
+
+    const userToken = localStorage.getItem(this.TOKEN_KEY)
+
+    return userToken ? JSON.parse(userToken) : null
+  }
+
+  reset(): TokenServiceI {
+    localStorage.removeItem(this.TOKEN_KEY)
+
+    return this
+  }
+}

public/img/db-model.png

@@ -28,14 +28,14 @@ public function index(Request $request)
         $demoRoutes = [];
         $demoRoutes['Basic: Simple controller'] = $router->generate('simple');
         $demoRoutes['Basic: Hello controller with twig'] = $router->generate('app_hello_world', ['name' => 'world', ]);
-        $demoRoutes['Basic: HttpPlug demo'] = $router->generate('app_http_call');
+        $demoRoutes['Basic: HttpClient demo'] = $router->generate('app_http_call');
 
-        $demoRoutes['Login: Symfony secured page with form_login'] = $router->generate('demo_secured_page_standard');
-        $demoRoutes['Login: Vuejs secured page with json_login'] = $router->generate('demo_login_json_check'); // if i go to demo_secured_page_json i will just get a json string !!! user won't know how to go to the form uri (i may add the uri in the response, but if i link to the form and the user is already logged, it will then be redirected to the secured page)
-        $demoRoutes['Login: Quasar secured page with JWT system'] = $router->generate('demo_login_jwt');
+        $demoRoutes['Login: Symfony secured page with form_login (statefull)'] = $router->generate('demo_secured_page_standard');
+        $demoRoutes['Login: Vuejs secured page with json_login (statefull)'] = $router->generate('demo_login_json_check'); // if i go to demo_secured_page_json i will just get a json string !!! user won't know how to go to the form uri (i may add the uri in the response, but if i link to the form and the user is already logged, it will then be redirected to the secured page)
+        $demoRoutes['Login: Quasar secured page with JWT system (stateless)'] = $router->generate('demo_login_jwt');
 
         $demoRoutes['JS app: Csrf token generation for statefull app'] = $router->generate('token');
-        $demoRoutes['JS app: User login check (security_json firewall)'] = $router->generate('demo_secured_page_json_is_logged_in');
+        $demoRoutes['JS app: User login check (statefull)'] = $router->generate('demo_secured_page_json_is_logged_in');
 
         $demoRoutes['Vuejs: page with vue-router'] = $router->generate('vuejs');
         $demoRoutes['Vuejs: with quasar and vue-router'] = $router->generate('vuejs_quasar');
@@ -50,8 +50,8 @@ public function index(Request $request)
         $demoRoutes['Easy admin'] = $router->generate('easyadmin');
 
         if (!$hasPemCertificate) {
-            $demoRoutes['Basic: HttpPlug demo'] = [
-                'uri' => $demoRoutes['Basic: HttpPlug demo'],
+            $demoRoutes['Basic: HttpClient demo'] = [
+                'uri' => $demoRoutes['Basic: HttpClient demo'],
                 'note' => 'You need to set php.ini vars: curl.cainfo and openssl.cafile to the path of the pem file.'
                     . ' if you need one, <a href="https://curl.haxx.se/docs/caextract.html">download the certificate</a>',
             ];