angular - 如何創建一個 canActivate 保護以僅允許來自另一個組件的重定向？

Question

我有一個組件，我希望僅在從另一個組件重定向的情況下才允許它訪問。
因此，如果我將 url 放在瀏覽器中，它將不允許我訪問它，但是，如果我從另一個像這樣的特定組件重定向到它，它將被允許：

this.router.navigate(['/main/myLockedComponent']);

我想添加一個類似於 authGuard 的 canActivate 守衛，如下所示：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ValidationGuardService implements CanActivate{

  constructor() { }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean  {
    console.log(route);
    console.log(state);
    return true;
  }
}

但是通過打印 state 和路由，我找不到我需要的信息，例如該組件是否從 angular 組件內部重定向到內部（更好的是從哪個組件） 。

編輯：我正在使用 angular 11。

Answer 1

如果你想檢查你是否從這樣的路線重定向www.testsite.com/main/profile ，你可以在你的警衛內寫一個條件為

import { Injectable } from '@angular/core';
import { CanActivate, Router} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ValidationGuardService implements CanActivate{

  constructor(private router : Router) { }
  canActivate(): boolean  {

    let currentUrl = this.router.url;
    let isFromProfile = currentUrl.indexOf('/profile') == -1 ? false : true;
    console.log(currentUrl);
    if(isFromProfile)
       return true;
    else 
       return false;
    }
}

您還可以使用以下方法檢查 url 的最后一部分是否是我們所期望的：

let isFromProfile = this.router.url.split('/').pop() === 'profile';

希望這回答了你的問題:-)