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]
})

在需要守卫的地方加入:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wsqwsq1596/article/details/83013203
今日推荐