Merge pull request #114 from marc101101/bug/reload-routing

Bug/reload routing

Author: marc101101

client/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { HomeComponent } from './components/home/home.component';
 import { CategoriesComponent } from './components/home/categories/categories.component';
 import { ProfilComponent } from './components/home/profil/profil.component';
 import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
  const routes: Routes = [
     {
@@ -27,6 +28,7 @@ import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
     {
         path: 'home',
         loadChildren: './components/home/home.module#HomeModule',
+        canActivate: [AuthGuard],
         data: {prelaod: true}
     },
     {
@@ -39,6 +41,6 @@ import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
 @NgModule({
     imports: [RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })],
     exports: [RouterModule],
-    providers: [SelectivePreloadingStrategy]
+    providers: [SelectivePreloadingStrategy, { provide: LocationStrategy, useClass: HashLocationStrategy}]
 })
 export class AppRoutingModule { }

client/app/components/home/home-routing.module.ts

@@ -9,7 +9,7 @@ const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    //canActivate: [AuthGuard],
+    canActivate: [AuthGuard],
     children: [
       {
         path: 'kategorien',
@@ -42,5 +42,6 @@ const routes: Routes = [
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
+  
 })
 export class HomeRoutingModule { }

client/app/components/home/profil/profil.component.html

@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="column is-10" style="z-index: 1;">
-      <div style="font-size: 1.5rem; color:white; margin-top: 0.2rem;">
+      <div *ngIf="dataIsAvailable" style="font-size: 1.5rem; color:white; margin-top: 0.2rem;">
         {{user.TEIL_VORNAME}} {{user.TEIL_NACHNAME}}
       </div>
     </div>
@@ -24,17 +24,14 @@
         #mail="ngModel">
       <br>
       <br>
-      <input class="input is-medium" type="text" placeholder="Telefon / Handy" id="mobile" [(ngModel)]="user.TEIL_HANDY" name="mobile" #mail="ngModel">
+      <input *ngIf="dataIsAvailable" class="input is-medium" type="text" placeholder="Adresse" id="address" [(ngModel)]="user.TEIL_ORT" name="address"
+        #address="ngModel">
       <br>
       <br>
-      <input class="input is-medium" type="text" placeholder="Adresse" id="address" [(ngModel)]="user.TEIL_ORT" name="address"
-        #mail="ngModel">
-      <br>
-      <br>
-      <input class="input is-medium" type="text" placeholder="BLZ" id="blz" [(ngModel)]="user.TEIL_BLZ" name="blz" #mail="ngModel" maxlength="8">
+      <input *ngIf="dataIsAvailable" class="input is-medium" type="text" placeholder="BLZ" id="blz" [(ngModel)]="user.TEIL_BLZ" name="blz" #blz="ngModel" maxlength="8">
       <br>
       <br>
-      <input class="input is-medium" type="text" placeholder="IBAN" id="iban" [(ngModel)]="user.TEIL_IBAN" name="iban" #mail="ngModel" maxlength="22">
+      <input *ngIf="dataIsAvailable" class="input is-medium" type="text" placeholder="IBAN" id="iban" [(ngModel)]="user.TEIL_IBAN" name="iban" #iban="ngModel" maxlength="22">
       <br>
       <br>
       <div class="columns is-mobile">

client/app/components/home/profil/profil.component.ts

@@ -22,8 +22,8 @@ export class ProfilComponent implements OnInit {
 
   ngOnInit() {
     this.userService.getUserMe().subscribe(response => {    
-      this.dataIsAvailable = true; 
       this.user = response;
+      this.dataIsAvailable = true; 
     });
   }
 

client/app/components/login/login.component.ts

@@ -32,7 +32,7 @@ export class LoginComponent implements OnInit {
       if (data.token && !this.jwtHelper.isTokenExpired(data.token)) {
         // store jwt token in local storage to keep user logged in between page refreshes
         localStorage.setItem('token', data.token);       
-        this.router.navigate(['/home/profil']).catch(error => {
+        this.router.navigate(['/home/kategorien']).catch(error => {
           console.log(error);
         });
       }

client/app/guards/auth.guard.ts

@@ -2,25 +2,17 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { AuthService } from '../services/auth.service';
 import { JwtHelperService } from '@auth0/angular-jwt';
+import { log } from 'util';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class AuthGuard {
 
-  private jwtHelper: JwtHelperService = new JwtHelperService();
-
   constructor( private authService : AuthService, private router : Router ) {
   }
 
-  canActivate( route : ActivatedRouteSnapshot, state : RouterStateSnapshot ) {
-    
-    if(this.authService.isLoggedIn() && !this.jwtHelper.isTokenExpired(localStorage.getItem('token'))){
-        return true;
-    }
-    else{
-      this.router.navigate(['/login']).catch(error => {
-        console.log(error);        
-      });
-      return false;
-    }
+  canActivate( route : ActivatedRouteSnapshot, state : RouterStateSnapshot ): Observable<boolean> {
+    return this.authService.isLoggedIn();
   }
+
 }

client/app/services/auth.service.ts

@@ -5,6 +5,9 @@ import { environment } from '../../environments/environement';
 import { UserData } from '../models/UserData';
 import { AlertService } from './alert.service';
 import { map, catchError } from 'rxjs/operators';
+import { log } from 'util';
+import { Router } from '@angular/router';
+import { JwtHelperService } from '@auth0/angular-jwt';
 
 @Injectable({
   providedIn: 'root'
@@ -14,11 +17,30 @@ export class AuthService {
 
   private authStatus: boolean = false;
   private url: string = environment.apiUrl;
+  private jwtHelper: JwtHelperService = new JwtHelperService();
 
-  constructor(public http: HttpClient, public alertService: AlertService) { }
+  constructor(public http: HttpClient, public alertService: AlertService, public router: Router) { }
 
-  isLoggedIn(): boolean{   
-    return this.authStatus;
+  isLoggedIn(): Observable<boolean>{   
+    if(this.jwtHelper.isTokenExpired(localStorage.getItem('token'))){
+      this.navToLogin();
+    }
+    else{
+      this.authStatus = true;
+    }
+
+    if(!this.authStatus){
+      this.navToLogin();
+    }
+    
+    return Observable.of(this.authStatus);
+  }
+
+  navToLogin():void{
+    this.authStatus = false;
+    this.router.navigate(['/login']).catch(error => {
+      console.log(error);       
+    });    
   }
 
   login(user:UserData): Observable<any>{
@@ -35,7 +57,9 @@ export class AuthService {
   }
 
   logout(): void{
-
+    localStorage.removeItem('token');
+    this.authStatus = false;
+    console.log("2", this.authStatus);
   }
 
   register(): void{

dist/0.bff4d9e4d37e1d4884c7.js dist/0.2e8e3ffbf674a1dd1b2f.jsdist/0.bff4d9e4d37e1d4884c7.js renamed to dist/0.2e8e3ffbf674a1dd1b2f.js

@@ -15,5 +15,5 @@
 
 <body class="main" style="height: 100% ; overflow: hidden; position: relative;">
     <app-root>Loading...</app-root>
-<script type="text/javascript" src="runtime.b58f17c4d08aa46ec888.js"></script><script type="text/javascript" src="polyfills.3e60cfe9b1313ccedf9e.js"></script><script type="text/javascript" src="main.cecf8081710a9faaa299.js"></script></body>
+<script type="text/javascript" src="runtime.c959c8794a7c02220116.js"></script><script type="text/javascript" src="polyfills.3e60cfe9b1313ccedf9e.js"></script><script type="text/javascript" src="main.6c040a6ff9c9e2fb487e.js"></script></body>
 </html>