angular4+ 路由守衛
阿新 • • 發佈:2018-12-15
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]
})
在需要守衛的地方加入: