在调用 Angular 构造函数之前捕获查询字符串

Posted 2023-02-19

【中文标题】在调用 Angular 构造函数之前捕获查询字符串

【英文标题】：Capturing query string before Angular Constructor is called

【发布时间】：2020-12-21 18:06:54

【问题描述】：

我正在使用第三方工具 (Strapi) 通过 MSAL 进行身份验证。

打开 Angular 网站 重定向到 Microsoft 登录 使用有效令牌重定向回 Angular 应用程序。

在第 2 步和第 3 步之间，有一个来自 Strapi 的单独访问令牌作为 url 中的查询字符串，我需要将其发送回 Strapi 以便从中获取令牌。此令牌旨在授予对 CMS 的访问权限。其目的是将 Strapi 用作 Microsoft 的 SSO 提供程序，以便同时访问 MSAL 和 Strapi。

我从 Strapi 获得的访问令牌是有效的，但问题是一旦 Angular 应用程序初始化，url 中的查询字符串就会丢失（仅显示一秒钟，但可以在“网络”选项卡中进行验证）。所以通常你可以在构造函数中捕获查询字符串，我无法捕获它，因为它在构造函数被调用之前就消失了。

我不确定如何保存此值，以便将其发送到需要的地方。

以下是我尝试过的两个示例，但由于上述原因而没有奏效。

constructor(
    public mediaObserver: MediaObserver,
    private router: Router,
    private authService: MsalService,
    private broadcastService: BroadcastService,
    private apibundleService: ApibundleService,
    private permissionsService: NgxPermissionsService,
    private http: HttpClient,
    private route: ActivatedRoute
  ) 
    this.route.queryParams.subscribe((params) => 
      this.queryAccessToken = params['access_token'];
      console.log(this.queryAccessToken);
    );
  

constructor(
    public mediaObserver: MediaObserver,
    private router: Router,
    private authService: MsalService,
    private broadcastService: BroadcastService,
    private apibundleService: ApibundleService,
    private permissionsService: NgxPermissionsService,
    private http: HttpClient,
    private route: ActivatedRoute
  ) 
   this.route.fragment
  .pipe(map(fragment => fragment))
  .subscribe(fragment => 
    let f = fragment.match(/^(.*?)&/);
    if(f) 
      let token: string = f[1].replace('access_token=', '');     
    
  )
  

【问题讨论】：

“url中的查询字符串丢失”。您的路由器配置中有重定向路由吗？

是的，我有一个基本的通配符重定向设置为 path: '**', redirectTo: ''。当访问令牌传递时，它像这样 localhost:4200/?access_token=12345 进来。

删除通配符重定向后会发生什么？

我取出了所有重定向并再次尝试了身份验证。看起来行为是一样的。在 1-2 秒内，带有访问令牌的 url 就像 localhost:4200/?access_token=12345 一样。然后它重定向回根页面。我怀疑在重定向发生之前 Angular 甚至还没有初始化，但我不确定。

你可以监视router events。也许这样你就可以确定发生了什么以及为什么。使用enableTracing option。

【参考方案1】：

在这里创建了一个问题。 https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3242

在 1.4.2 中已经解决了。请更新库。