Angular 9中HTTP请求如何传递变量 为MSAL拦截器配置添加时间参数

第一步：调整MSAL拦截器的资源匹配规则 #

MSAL拦截器的protectedResourceMap支持通配符前缀匹配，无需将固定时间参数写死在配置中，修改配置如下：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  // 通配符*匹配所有以该前缀开头的请求，所有带动态参数的同接口请求都会自动命中该权限配置
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/communications/callRecords/getPstnCalls*', ['CallRecords.Read.All','CallRecord-PstnCalls.Read.All','CallRecords.Read.All']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

第二步：发起请求时动态拼接时间参数 #

该接口是微软Graph的OData格式接口，参数需要拼接在路径的括号中，使用模板字符串动态插入变量即可：

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

@Component({
  // 你的组件配置
})
export class YourComponent {
  constructor(private http: HttpClient) {}

  getPstnCalls(fromDate: string, toDate: string) {
    // 时间格式需符合ISO 8601标准，例如2024-01-01、2024-01-01T00:00:00Z
    const requestUrl = `https://graph.microsoft.com/v1.0/communications/callRecords/getPstnCalls(fromDateTime=${fromDate},toDateTime=${toDate})`;
    
    this.http.get(requestUrl).subscribe({
      next: (res) => {
        // 处理返回的通话记录数据
      },
      error: (err) => {
        // 处理请求异常
      }
    })
  }
}

注意事项 #

• 时间参数必须符合微软Graph接口要求的ISO 8601格式，建议携带时区标识避免时间偏移问题
• 若需要额外添加查询参数，可直接在路径后拼接，通配符匹配规则依然生效

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