Updated

Author: abritopach

src/app/app-routing.module.ts

@@ -1,12 +1,20 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
+import { AuthGuardService } from './services/auth-guard.service';
+
 const routes: Routes = [
- { path: '', redirectTo: 'home', pathMatch: 'full' },
- { path: 'home', loadChildren: './home/home.module#HomePageModule' },
+ // { path: '', redirectTo: 'home', pathMatch: 'full' },
+ { path: '', redirectTo: 'login', pathMatch: 'full' },
+ // { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './public/register/register.module#RegisterPageModule' },
- { path: 'dashboard', loadChildren: './members/dashboard/dashboard.module#DashboardPageModule' },
+ {
+ path: 'members',
+ canActivate: [AuthGuardService],
+ loadChildren: './members/member-routing.module#MemberRoutingModule'
+ },
+ // { path: 'dashboard', loadChildren: './members/dashboard/dashboard.module#DashboardPageModule' },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -4,6 +4,9 @@ import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 
+import { Router } from '@angular/router';
+import { AuthenticationService } from './services/authentication.service';
+
 @Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
@@ -12,7 +15,9 @@ export class AppComponent {
  constructor(
  private platform: Platform,
  private splashScreen: SplashScreen,
- private statusBar: StatusBar
+ private statusBar: StatusBar,
+ private router: Router,
+ private authenticationService: AuthenticationService
  ) {
  this.initializeApp();
  }
@@ -21,6 +26,14 @@ export class AppComponent {
  this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
+
+ this.authenticationService.authenticationState.subscribe(state => {
+ if (state) {
+ this.router.navigate(['members', 'dashboard']);
+ } else {
+ this.router.navigate(['login']);
+ }
+ });
  });
  }
 }

src/app/app.module.ts

@@ -9,10 +9,17 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 
+import { IonicStorageModule } from '@ionic/storage';
+
 @NgModule({
  declarations: [AppComponent],
  entryComponents: [],
- imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+ imports: [
+ BrowserModule,
+ IonicModule.forRoot(),
+ AppRoutingModule,
+ IonicStorageModule.forRoot()
+ ],
  providers: [
  StatusBar,
  SplashScreen,

src/app/members/dashboard/dashboard.page.html

@@ -1,9 +1,14 @@
 <ion-header>
  <ion-toolbar>
- <ion-title>dashboard</ion-title>
+ <ion-buttons slot="end">
+ <ion-button (click)="logout()">
+ <ion-icon slot="icon-only" name="log-out"></ion-icon>
+ </ion-button>
+ </ion-buttons>
+ <ion-title>My Dashboard</ion-title>
  </ion-toolbar>
 </ion-header>
-
+ 
 <ion-content padding>
-
-</ion-content>
+ 
+</ion-content>

src/app/members/dashboard/dashboard.page.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { AuthenticationService } from '../../services/authentication.service';
+
 @Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
 })
 export class DashboardPage implements OnInit {
 
- constructor() { }
+ constructor(private authenticationService: AuthenticationService) { }
 
  ngOnInit() {
  }
 
+ logout() {
+ this.authenticationService.logout();
+ }
+
 }

src/app/members/member-routing.module.ts

@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+ { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardPageModule' }
+];
 
 @NgModule({
- imports: [
- CommonModule
- ],
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
  declarations: []
 })
 export class MemberRoutingModule { }

src/app/public/login/login.page.html

@@ -1,9 +1,10 @@
 <ion-header>
  <ion-toolbar>
- <ion-title>login</ion-title>
+ <ion-title>Login</ion-title>
  </ion-toolbar>
 </ion-header>
 
 <ion-content padding>
-
+ <ion-button (click)="login()" expand="block">Login</ion-button>
+ <ion-button expand="block" color="secondary" href="/register" routerDirection="forward">Register</ion-button>
 </ion-content>

src/app/public/login/login.page.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { AuthenticationService } from '../../services/authentication.service';
+
 @Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
 
- constructor() { }
+ constructor(private authenticationService: AuthenticationService) { }
 
  ngOnInit() {
  }
 
+ login() {
+ this.authenticationService.login();
+ }
+
 }

src/app/public/register/register.page.html

@@ -1,9 +1,12 @@
 <ion-header>
  <ion-toolbar>
- <ion-title>register</ion-title>
+ <ion-buttons slot="start">
+ <ion-back-button defaultHref="/login"></ion-back-button>
+ </ion-buttons>
+ <ion-title>Register</ion-title>
  </ion-toolbar>
 </ion-header>
-
+ 
 <ion-content padding>
-
+ 
 </ion-content>

src/app/services/auth-guard.service.ts

@@ -1,9 +1,15 @@
 import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { AuthenticationService } from './authentication.service';
 
 @Injectable({
  providedIn: 'root'
 })
-export class AuthGuardService {
+export class AuthGuardService implements CanActivate {
 
- constructor() { }
+ constructor(private authenticationService: AuthenticationService) { }
+
+ canActivate(): boolean {
+ return this.authenticationService.isAuthenticated();
+ }
 }