如何实现Angular Auth Guard？登录后无法跳转至目标页面求助

你的代码存在三个核心问题，导致无法实现登录后跳转回目标页面的需求：

• Auth Guard构造函数错误注入RouterStateSnapshot，该参数仅能在canActivate方法中获取
• AuthService中错误存储了当前路由地址，而非用户最初要访问的目标路由地址
• 登录成功后未更新认证状态，导致后续访问仍会被拦截

1. 修正Auth Guard代码 #

移除构造函数中错误的参数注入，改为在canActivate方法里将用户目标路由地址传递给AuthService：

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  // 移除构造函数中的RouterStateSnapshot参数
  constructor(private authService: AuthService, private router: Router){};

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const isLoggedIn = this.authService.isAuthenticated();
    if (isLoggedIn){
      return true;
    } else {
      // 存储用户原本要访问的地址
      this.authService.redirectUrl = state.url;
      this.router.navigate(['/login']);
      return false;
    }
  }
}

2. 修正AuthService代码 #

删除isAuthenticated方法中错误的路由地址赋值，新增更新认证状态的方法：

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  redirectUrl: string;
  isLoggedIn = false;

  constructor(private router: Router) { }

  isAuthenticated(){
    // 移除错误的this.redirectUrl赋值逻辑
    return this.isLoggedIn;
  }

  // 新增：登录成功后更新认证状态
  markAsLoggedIn() {
    this.isLoggedIn = true;
  }
}

3. 修正登录组件的认证逻辑 #

登录成功后先更新认证状态，再跳转到存储的目标地址：

const headers= new HttpHeaders({authorization: 'Basic ' + window.btoa(this.loginData.email + ":" + this.loginData.password)});
this.httpClient.get("http://localhost:8181/authorize/", {headers, responseType: 'text' as 'json'})
.subscribe(
  (response) => {
    console.log(response);
    // 先标记用户已登录
    this.authService.markAsLoggedIn();
    // 跳转到目标地址，默认回order页
    this.router.navigate([this.authService.redirectUrl || '/order']);
  },
  (error) => console.log(error)
);

验证流程 #

1. 点击Order按钮时，Auth Guard检测到未登录，将/order存入redirectUrl并跳转到登录页
2. 用户登录成功后，AuthService更新认证状态，随后跳转到存储的/order地址
3. 后续访问Order页时，Auth Guard会通过认证，直接进入页面

内容的提问来源于stack exchange，提问作者Devmina