1. 程式人生 > >angular4+ 路由守衛

angular4+ 路由守衛

1.在src/app目錄下建立資料夾guard 新建個檔案login.guard.ts 內容:

 	import { Injectable, Inject } from "@angular/core";
    import { DOCUMENT } from "@angular/common";
    import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, NavigationStart } from "@angular/router";
    
    @Injectable()
    export class LoginGuard implements CanActivate {
      constructor(private router: Router, @Inject(DOCUMENT) private document: any) {
      }
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let loggedIn;
        if (window.localStorage.token) {
          loggedIn = true;
        } else {
          loggedIn = false;
          this.router.navigateByUrl('/login');
        }
        return loggedIn;
      }
    }

2.在app.router.ts檔案裡引入

import {LoginGuard} from './guard/login.guard';

在裝飾器裡引入:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard, UnsavedGuard]
})

在需要守衛的地方加入:
在這裡插入圖片描述