Angular路由守卫如何获取用户直接输入的URL以拦截未授权访问

问题核心 #

你已经通过Angular的canActivate守卫实现了/admin路由的权限拦截，但在处理designForm/:id路由时，直接输入URL的未授权用户仍能访问页面。关键问题是守卫触发时，服务中通过this.router.url获取的是旧路由（如"/"），无法拿到目标URL中的id参数进行数据库验证。

解决方案 #

1. 利用守卫自带的路由快照获取ID #

Angular在canActivate方法中提供了ActivatedRouteSnapshot参数，它包含了目标路由的所有信息，包括URL参数，无需依赖服务中的Router或ActivatedRoute实例。

2. 将权限验证改为异步逻辑 #

数据库请求是异步操作，原同步返回boolean的方式会导致验证逻辑未执行完就返回结果，必须改成返回Promise<boolean>或Observable<boolean>。

修改后的代码示例 #

AccessFormsGuard（守卫）

export class AccessFormsGuard2 implements CanActivate {
  constructor(
    private formAllServ: FormulaireAllService, 
    private router: Router, 
    private toastr: ToastrService
  ) {}
  
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> {
    // 直接从目标路由快照中提取ID
    const formId = route.paramMap.get('id');
    
    // 没有ID直接拦截
    if (!formId) {
      this.router.navigate(['/homeUser']);
      return Promise.resolve(false);
    }

    // 调用服务的异步权限验证方法
    return this.formAllServ.isAuthorizedToAccessFormsGuard(formId)
      .then(isAuthorized => {
        if (!isAuthorized) {
          console.error("Access DENIED: User has no permission for this form");
          this.toastr.error("您无此表单的访问权限");
          this.router.navigate(['/homeUser']);
          return false;
        }
        console.log("Access AUTHORIZED");
        return true;
      })
      .catch(err => {
        console.error("Permission check failed:", err);
        this.router.navigate(['/homeUser']);
        return false;
      });
  }
}

FormulaireAllService（服务）

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FormulaireAllService {
  constructor(private http: HttpClient) {}

  // 接收ID参数，异步验证权限
  public isAuthorizedToAccessFormsGuard(formId: string): Promise<boolean> {
    // 替换为你的实际数据库请求接口
    return this.http.get<boolean>(`/api/forms/check-access/${formId}`)
      .toPromise()
      .then(isFound => isFound)
      .catch(() => false);
  }
}

补充说明 #

如果需要在服务中获取完整的目标URL，可以将守卫的RouterStateSnapshot.url传递给服务方法，示例：

// 在守卫中调用
return this.formAllServ.isAuthorizedToAccessFormsGuard(formId, state.url);

// 在服务中接收
public isAuthorizedToAccessFormsGuard(formId: string, targetUrl: string): Promise<boolean> {
  console.log("目标URL:", targetUrl); // 输出 "/designForm/123ytfdhs653HG"
  // 后续验证逻辑...
}

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