Angular 如何通过在cookie中将jwt传递到前端来编程auth guards？

大家好，提前谢谢， 我已经用laravel在我的后端编程，用sanctum软件包登录。我将登录生成的令牌保存在cookie中，以避免XSS攻击。 我想保护注册用户的路由，因为目前我只希望经过身份验证的用户注册用户，现在，它显示表单并在调用提交函数时给出错误。这很好，但我真正想要的是，如果您未经身份验证，它不会直接允许访问该路由，它会重定向到登录。 要根据用户是否经过身份验证在导航栏中显示不同的元素，我使用EventEmitter并在导航栏组件中订阅它。我想我可以在我的身份验证服务中做同样的事情，但这对我来说不起作用，我想我的经验不足是问题所在。我在下面显示代码，以便您可以帮助我。多谢各位

emitters.ts

import { EventEmitter } from '@angular/core';

export class Emitters
{
    static authEmitter = new EventEmitter<boolean>();
}

navbar.component.ts

export class NavbarComponent implements OnInit {
  authenticated = false;

  constructor(
    private http: HttpClient
  ) { }

  ngOnInit(): void {
    Emitters.authEmitter.subscribe(
      (auth: boolean) => {
        this.authenticated = auth;
      }
    );
  }

navbar.component.html

<ul class="navbar-nav mr-auto mb-2 mb-md-0">
          <li class="nav-item" *ngIf="!authenticated">
            <a class="nav-link" routerLink="login">Login</a>
          </li>
          <li class="nav-item" *ngIf="authenticated">
            <a class="nav-link" routerLink="login" (click)="logout()">Logout</a>
          </li>
        </ul>

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Emitters } from '../emitters/emitters';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService {
  authenticated: boolean;

  constructor(
    private router: Router
  ) {}

  canActivate(): boolean {
    Emitters.authEmitter.subscribe(
      (auth: boolean) => {
        this.authenticated = auth;
      });
    
    if(!this.authenticated)
    {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}