angular之CanActivate守卫

效果图
1、没有加守卫的页面可以直接进入

2、加了守卫的页面需要验证

我这里使用的是弹框，实例开发时，可以改为跳到登陆页

具体实现：

1、准备步骤

新建angular项目

ng new angularDeom --skip-install
cd angularDemo
cnpm i

2、创建路由守卫

2.1、创建

ng g guard guards/login

选择第一个

路由守卫文件需要填充的内容截图：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { CookieService } from 'ngx-cookie-service';

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {
  public token: any;

  constructor(private cookieService: CookieService, private router: Router) { }
  /