Angular2 在 CanActivate 之前解析

Angular2 中 CanActivate 前的解析与案例代码

typescript
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class PreActivationService {
  performPreActivation(): boolean {
    // 在这里执行您的自定义逻辑
    console.log('执行预激活任务');
    return true; // 返回 true 表示可以激活路由，返回 false 表示阻止路由激活
  }
}

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class MyAuthGuard implements CanActivate {
  constructor(private preActivationService: PreActivationService) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | UrlTree | Observable | Promise {
    // 在这里执行 CanActivate 逻辑之前的任务
    const preActivationResult = this.preActivationService.performPreActivation();
    if (preActivationResult) {
      // 如果任务成功，则允许路由激活
      return true;
    } else {
      // 如果任务失败，则导航到一个特定的页面或执行其他操作
      // 例如，导航到登录页面
      return this.router.createUrlTree(['/login']);
    }
  }
}