Added login navigation guard

2021-04-28 00:20:25 +02:00
parent e994a63c46
commit e2bd5db15b
25 changed files with 322 additions and 23724 deletions
@@ -1,20 +1,31 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
+import {AuthGuardService} from './services/auth-guard.service';
 import {LoginComponent} from './component/login/login.component';
-import {HomeComponent} from './component/home/home.component';
+import {TweetsComponent} from './component/tweets/tweets.component';
+import {EinstellungenComponent} from './component/einstellungen/einstellungen.component';
+import {UnAuthGuardService} from './services/un-auth-guard.service';

 const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
+    canActivate: [UnAuthGuardService]
  },
  {
    path: 'login',
    component: LoginComponent,
+    canActivate: [UnAuthGuardService]
  },
  {
-    path: 'home',
-    component: HomeComponent,
+    path: 'tweets',
+    component: TweetsComponent,
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'einstellungen',
+    component: EinstellungenComponent,
+    canActivate: [AuthGuardService]
  },
 ];

@@ -17,9 +17,19 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatSliderModule} from '@angular/material/slider';
 import {LoginComponent} from './component/login/login.component';
 import {HomeComponent} from './component/home/home.component';
+import { AuthGuardService } from './services/auth-guard.service';
+import { AuthService } from './services/auth.service';
+import {JwtHelper} from 'angular2-jwt';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import { TweetsComponent } from './component/tweets/tweets.component';
+import { EinstellungenComponent } from './component/einstellungen/einstellungen.component';
+import { NavigationComponent } from './component/navigation/navigation.component';

@NgModule({
-  declarations: [LandingComponent, TestSubCompComponent, LoginComponent, HomeComponent],
+  declarations: [LandingComponent, TestSubCompComponent, LoginComponent,
+    HomeComponent, TweetsComponent, EinstellungenComponent, NavigationComponent],
  imports: [
    ReactiveFormsModule,
    BrowserModule,
@@ -32,11 +42,17 @@ import {HomeComponent} from './component/home/home.component';
    MatButtonModule,
    MatInputModule,
    MatSlideToggleModule,
-    MatSliderModule
+    MatSliderModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatMenuModule
  ],
  // enables injecting
  providers: [
+    AuthService,
+    AuthGuardService,
    RestService,
+    JwtHelper,
    /*{
      provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true
    },*/
@@ -0,0 +1,2 @@
+<app-navigation></app-navigation>
+<p>einstellungen works!</p>
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-einstellungen',
+  templateUrl: './einstellungen.component.html',
+  styleUrls: ['./einstellungen.component.css']
+})
+export class EinstellungenComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Router} from '@angular/router';
+import {environment} from '../../../environments/environment';

@Component({
  selector: 'app-home',
@@ -9,17 +10,17 @@ import {ActivatedRoute, Router} from '@angular/router';
 })
 export class HomeComponent implements OnInit {

+  openid_endpoint = environment.openid_endpoint;
+
  id_token = 'x';
  state = 'y';
  parsedToken;

-  constructor(private http: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
+  constructor(private http: HttpClient, private router: Router) {
  }

  ngOnInit(): void {
    this.paramsFromUrl();
-    console.log(this.parsedToken);
-    this.activatedRoute.fragment.subscribe(data => console.log(data));
  }

  logout() {
@@ -27,8 +28,8 @@ export class HomeComponent implements OnInit {
      'Accept': '*/*',
      'Access-Control-Allow-Origin': '*'
    };
-    this.http.get('https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect/logout' +
-      '?id_token_hint=' + this.id_token + '&\n' +
+    this.http.get(this.openid_endpoint + '/logout?' +
+      'id_token_hint=' + this.id_token + '&\n' +
      'post_logout_redirect_uri=http://localhost:4200&\n' +
      'state=' + this.state,
      {
@@ -1,2 +1,5 @@
-<h1 style="text-align: center; margin-top: 1em">Bsp 1 Gruppe 4</h1>
-<app-login></app-login>
+<div>
+  <router-outlet>
+  </router-outlet>
+</div>
+
@@ -1,15 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.css']
 })
-export class LandingComponent implements OnInit {
-
+export class LandingComponent {
  constructor() {
  }
-
-  ngOnInit(): void {
-  }
 }
@@ -1,4 +1,4 @@
-<!--<button mat-raised-button (click)="gotoBackend()">Call Backend</button>-->
+<app-navigation></app-navigation>
 <span id="loginBtnWrapper">
  <button *ngIf="!parsedToken"
          mat-raised-button color="primary"
@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AuthService} from '../../services/auth.service';
+import {environment} from '../../../environments/environment';

@Component({
  selector: 'app-login',
@@ -8,7 +10,8 @@ import {ActivatedRoute} from '@angular/router';
  styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
-  openid_endpoint = 'https://waecm-sso.inso.tuwien.ac.at/auth/realms/waecm/protocol/openid-connect';
+
+  openid_endpoint = environment.openid_endpoint;
  id_token;
  state;
  parsedToken;
@@ -16,7 +19,9 @@ export class LoginComponent implements OnInit {
  errorMessage;

  constructor(private http: HttpClient,
-              private activatedRoute: ActivatedRoute) {
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private authService: AuthService) {
  }

  ngOnInit(): void {
@@ -32,6 +37,7 @@ export class LoginComponent implements OnInit {
            if (split[0] === 'id_token') {
              this.id_token = split[1];
              this.parsedToken = JSON.parse(atob(this.id_token.split('.')[1]));
+              this.authService.setToken(this.id_token);
              this.gotoBackend();
            } else if (split[0] === 'state') {
              this.state = split[1];
@@ -39,6 +45,9 @@ export class LoginComponent implements OnInit {
          }
        );
      }
+      if (this.authService.isAuthenticated()) {
+        this.router.navigate(['tweets']);
+      }
    });
  }

@@ -47,7 +56,7 @@ export class LoginComponent implements OnInit {
      'client_id=waecm' +
      '&response_type=id_token' +
      '&prompt=consent' +
-      '&redirect_uri=http://localhost:4200' +
+      '&redirect_uri=' + environment.location +
      '&scope=openid%20profile' +
      '&nonce=' + this.randomString(20);
    window.location.replace(url);
@@ -0,0 +1,16 @@
+<mat-toolbar>
+  <button *ngIf="show_menu"
+          mat-icon-button [matMenuTriggerFor]="menu"
+          class="example-icon" aria-label="Example icon-button with menu icon">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="logout()">
+      <mat-icon>logout</mat-icon>
+      <span>Abmelden</span>
+    </button>
+  </mat-menu>
+
+
+  <span>{{title}}</span>
+</mat-toolbar>
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {environment} from '../../../environments/environment';
+import {AuthService} from '../../services/auth.service';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.css']
+})
+export class NavigationComponent implements OnInit {
+
+  openid_endpoint: string = environment.openid_endpoint;
+  title: string = environment.title;
+
+  show_menu = false;
+
+  constructor(public authService: AuthService) {
+    this.show_menu = authService.isAuthenticated();
+  }
+
+  ngOnInit(): void {
+  }
+
+  logout() {
+    const token = this.authService.getToken();
+    let url = this.openid_endpoint + '/logout' +
+      '?post_logout_redirect_uri=' + environment.location;
+    if (token) {
+      url += '&id_token_hint=' + this.authService.getToken();
+    }
+    this.authService.deleteToken();
+    this.show_menu = false;
+    window.location.replace(url);
+  }
+
+}
@@ -0,0 +1,2 @@
+<app-navigation></app-navigation>
+<p>tweets works!</p>
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tweets',
+  templateUrl: './tweets.component.html',
+  styleUrls: ['./tweets.component.css']
+})
+export class TweetsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+@Injectable()
+export class AuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (!this.auth.isAuthenticated()) {
+      this.router.navigate(['login']);
+      return false;
+    }
+    return true;
+  }
+}
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import {JwtHelper} from 'angular2-jwt';
+
+@Injectable()
+export class AuthService {
+
+  tokenKey = 'loginToken';
+
+  constructor(public jwtHelper: JwtHelper) {}
+
+  public setToken(token): void {
+    sessionStorage.setItem(this.tokenKey, token);
+  }
+
+  public deleteToken(): void {
+    sessionStorage.removeItem(this.tokenKey);
+  }
+
+  public getToken(): string {
+    return sessionStorage.getItem(this.tokenKey);
+  }
+
+  // Check whether the token is expired and return
+  // true or false
+  public isAuthenticated(): boolean {
+    const token = sessionStorage.getItem(this.tokenKey);
+    if (token) {
+      return !this.jwtHelper.isTokenExpired(token);
+    } else {
+      return false;
+    }
+  }
+}
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import {CanActivate, Router} from '@angular/router';
+import {AuthService} from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UnAuthGuardService implements CanActivate {
+
+  constructor(public auth: AuthService, public router: Router) {}
+
+  canActivate(): boolean {
+    if (this.auth.isAuthenticated()) {
+      this.router.navigate(['tweets']);
+      return false;
+    }
+    return true;
+  }
+}