ใช้งาน Guard สำหรับ Asynchronous Routing ใน Angular ตอนที่ 11

const adminRoutes: Routes = [
  {
    path:'',  // แก้ไขส่วนนี้จากเดิม path:'admin' เป็น path:''
    component:AdminComponent,
    canActivate: [AuthGuardService], 
    children:[
      {
        path:'',
        component:AdminCenterComponent,
        canActivateChild: [AuthGuardService],
        children:[
          {
            path:'users',
            component:ManageUsersComponent
          },
          {
            path:'products',
            component:ManageProductsComponent
          }
        ]
      }
    ]
  }
];

const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
  },  
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ProductModule } from './product/product.module';
import { UserModule } from './user/user.module';
//import { AdminModule } from './admin/admin.module';
import { LoginModule } from './login/login.module';
import { GuestbookModule } from './guestbook/guestbook.module';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';

import { DialogService } from './dialog.service';
  
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PagenofoundComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProductModule,
    UserModule,
   // AdminModule,
    LoginModule,
    GuestbookModule,
    AppRoutingModule
  ], 
  providers: [
    DialogService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
// import ส่วนที่จะใช้งาน guard เช่น CanActivate, CanActivateChild เป็นต้นมาใช้งาน
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  NavigationExtras,
  CanActivateChild,
  CanLoad,Route
} from '@angular/router';
// import service ที่เช็คสถานะการล็อกอินมาใช้งาน
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService {

  // inject AuthService และ Router 
  constructor(
    private authService: AuthService, 
    private router: Router) {}
  
  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivate
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivate run');
    let url: string = state.url; // เก็บ url ที่พยายามจะเข้าใช้งาน
    // จะผ่านเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยเข้าไปเช็คค่าจากคำสั่ง checkLogin()
    return this.checkLogin(url); // คืนค่าการตรวจสอบสถานะการล็อกอิน
  }

  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivateChild ส่วนนี้จะใช้กับ path ของ route ย่อย
  // ถ้าเข้าผ่าน route path ย่อย guard จะเข้ามาเช็คในส่วนนี้ก่อน กลับไปเช็คในส่วนของ canActivate()
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivateChild run');
    // จะเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยจะใช้ค่าจากการเรียกใช้คำสั่ง canActivate()
    return this.canActivate(route, state);
  }

  // กำหนด guard ในส่วนของการใช้งานกับ canLoad ส่วนนี้จะใช้กับ path ที่มีการโหลด module 
  // แบบ asynchronous หรือ lazy load ผ่าน loadChildren property
  canLoad(route: Route): boolean {
    // ใช้ Route ในการอ้างอิงหรือดึงข้อมูล url
    let url = `/${route.path}`;
    // จะโหลด module เมื่อมีค่าเป็น true หรือเป็นผู้ใช้ admin ที่ล็อกอินแล้วเท่านั้น
    return this.checkLogin(url); 
  }

  // ฟังก์ชั่นเช็คสถานะการล็อกอิน รับค่า url ที่ผู้ใช้พยายามจะเข้าใช้งาน
  checkLogin(url: string): boolean {
    // ถ้าตรวจสอบค่าสถานะการล็อกอินแล้วเป็น true ก็ให้คืนค่า true กลับอกไป
    if (this.authService.isLoggedIn) { return true; }
    
    // แต่ถ้ายังไม่ได้ล็อกอิน ให้เก็บ url ที่พยายามจะเข้าใช้งาน สำหรับไว้ลิ้งค์เปลี่ยนหน้า
    this.authService.redirectUrl = url; // redirectUrl เป็นตัวแปรที่อยู่ใน authService

    // จำลองค่า session id
    let sessionId = 123456789;

    // กำหนด ค่าเพิ่มเติมให้กับ NavigationExtras ที่จะมีการส่งค่าไปพร้อมกับ url 
    // ประกอบไปด้วย query params และ fragment
    let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId },
      fragment: 'anchor'
    };

    // ลิ้งค์ไปยังหน้าล็อกอิน เพื่อล็อกอินเข้าใช้งานก่อน มีการส่งค่า query params
    this.router.navigate(['/login'],navigationExtras);
    return false; // คืนค่า false กรณียังไม่ได้ล็อกอิน
  }    

}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';

import { CanDetactivateGuardService } from './can-detactivate-guard.service';
import { AuthGuardService } from './auth-guard.service';
 
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuardService]
  },  
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
  ], 
  exports: [
    RouterModule
  ],
  providers:[
    CanDetactivateGuardService,
    AuthGuardService
  ]
})
export class AppRoutingModule { }

const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuardService]
  },  
  {
    path: 'products',
    loadChildren: 'app/product/product.module#ProductModule'
  },    
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';

import { CanDetactivateGuardService } from './can-detactivate-guard.service';
import { AuthGuardService } from './auth-guard.service';
 
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuardService]
  },  
  {
    path: 'products',
    loadChildren: 'app/product/product.module#ProductModule'
  },    
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { 
        enableTracing: false,
        preloadingStrategy: PreloadAllModules 
      } 
    )
  ], 
  exports: [
    RouterModule
  ],
  providers:[
    CanDetactivateGuardService,
    AuthGuardService
  ]
})
export class AppRoutingModule { }

C:\projects\simplerouter>ng g service selective-preloading-strategy

import { Injectable } from '@angular/core';
import 'rxjs/add/observable/of';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class SelectivePreloadingStrategyService {
  public preloadedModules: string[] = [];

  constructor() { }

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // เช็ค route ที่มีการกำหนด data และ data preload
    if (route.data && route.data['preload']) {
      // เพื่อ route path ที่จะใช้งาน  ไว้ใน preloaded module array
      this.preloadedModules.push(route.path);

      // แสดง route path ใน console
      console.log('Preloaded: ' + route.path);

      return load(); // โหลด module นั้น
    } else {
      return Observable.of(null); // คืนค่า null
    }
  }  

}

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';

import { CanDetactivateGuardService } from './can-detactivate-guard.service';
import { AuthGuardService } from './auth-guard.service';

import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';
 
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canLoad: [AuthGuardService]
  },  
  {
    path: 'products',
    loadChildren: 'app/product/product.module#ProductModule',
    data: { preload: true }
  },    
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { 
        enableTracing: false,
        preloadingStrategy: SelectivePreloadingStrategyService 
      } 
    )
  ], 
  exports: [
    RouterModule
  ],
  providers:[
    CanDetactivateGuardService,
    AuthGuardService,
    SelectivePreloadingStrategyService
  ]
})
export class AppRoutingModule { }

<p>
  home works!
</p>
Preloaded Modules
<ul>
  <li *ngFor="let module of modules">{{ module }}</li>
</ul>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute }       from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { SelectivePreloadingStrategyService } from '../selective-preloading-strategy.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public modules: string[];

  constructor(
    private route: ActivatedRoute,
    private preloadStrategy: SelectivePreloadingStrategyService
  ) {
    
  }

  ngOnInit() {
    this.modules = this.preloadStrategy.preloadedModules;
  }

}

const userRoutes: Routes = [
  {
    path:'users',
    component:UserCenterComponent,
    children:[
      {
        path: '',
        component: UserListComponent,
        children:[
          {
            path:':id',
            component:UserDetailComponent,
            resolve: {
              user: UserDetailResolverService
            }            
          }
        ] // end children
      }
    ] // end children
  }
];

const userRoutes: Routes = [
  {
    path:'users',redirectTo:'members'
  },
  {
    path:'members',
    component:UserCenterComponent,
    children:[
      {
        path: '',
        component: UserListComponent,
        children:[
          {
            path:':id',
            component:UserDetailComponent,
            resolve: {
              user: UserDetailResolverService
            }            
          }
        ] // end children
      }
    ] // end children
  }
];