Angular TypeScript 出现无效正则表达式语法错误无法定位问题求助

问题根因 #

1. 构造的请求URL存在语法缺失：你拼接的queryUrl在变量插值后，没有补全getPstnCalls方法对应的闭合右括号)，生成的URL最终只有左括号没有配对的右括号。MSAL拦截器内部会把protectedResourceMap的key作为正则模式解析，左括号在正则语法中代表分组起始，没有右括号闭合直接触发了「未终止的分组」报错。
2. 即便补全括号，URL中的圆括号属于正则元字符，直接作为模式使用时会被识别成分组标识，而非普通匹配字符，也会导致后续资源匹配逻辑异常。

修复方案 #

方案1：精确匹配该接口（适合参数固定的场景） #

补全URL的闭合括号，同时转义所有正则特殊字符：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  
  const fromDatetimeVariable ='2020-01-30';
  const toDatetimeVariable='2020-01-30';

  // 补全右括号，转义正则特殊字符( )
  const queryUrl = `https://graph\\.microsoft\\.com/v1\\.0/communications/callRecords/getPstnCalls\\(fromDateTime=${fromDatetimeVariable},toDateTime=${toDatetimeVariable}\\)`

  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(queryUrl, ['CallRecords.Read.All', 'CallRecord-PstnCalls.Read.All']);

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

方案2：前缀匹配（更推荐，适配动态参数场景） #

实际业务中时间参数通常是动态变化的，不需要写死完整URL匹配，直接配置接口前缀即可：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  // 所有该路径下的请求都会匹配对应的权限，不受参数变化影响
  protectedResourceMap.set('https://graph.microsoft.com/v1.0/communications/callRecords/', ['CallRecords.Read.All', 'CallRecord-PstnCalls.Read.All']);

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

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