@azure/msal为何强制未受保护路由的用户登录？

Angular应用中，产品列表页（根路径/）、产品详情页无需登录即可访问，仅my-listings页需要登录（已注释该路由的MsalGuard），但访问http://localhost:4200或登出后，用户仍被自动重定向到登录页。

当前路由配置 #

export const routes: Routes = [
 {
    path: '',
    component: ProductListComponent
 },
 {
    path: 'details/:productCode',
    component: ProductDetailsComponent
 },
 {
    path: 'my-listings',
    component: MyListingsComponent,
    // canActivate: [MsalGuard]
  }
];

相关配置文件 #

环境文件（environment.ts） #

auth: {
    authority: 'https://myInstance.ciamlogin.com/tenant-id',
    clientId: '818fb65a-f677-4e95-10023-a17734b7acf3',
    apis: [
        {
            uri: 'https://graph.microsoft.com/v1.0/me',
            scopes: 'User.Read'
        },
        {
            uri: `${baseUrl.apiUrl}`, // 怀疑此处有问题？
            scopes: 'api://1b03747b-4f11-44e0-a4c5-da6f7de7709e/Backend.Read'
        }
    ]
},

MSAL Guard配置 #

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
let scopes: string[] = [];
environment.auth.apis.forEach((api: any) => {
    scopes = [...scopes, api.scopes];
});
return {
      interactionType: InteractionType.Redirect,
      authRequest: { scopes },
      loginFailedRoute: '/login-failed',
  };
}

MSAL拦截器配置 #

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
environment.auth.apis.forEach((api: any) => {
    protectedResourceMap.set(api.uri, api.scopes.split(' ')); // 怀疑此处有问题？
});

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

排查现象 #

• 当API的uri配置为http://localhost:7100（根域名）时，该域名下所有请求都会触发强制登录；
• 当uri指定具体路径（如http://localhost:7100/api/load-all-products）时，不会触发自动登录；
• 推测MSAL库内部使用了类似startsWith的匹配逻辑，导致根域名下所有请求被判定为需认证资源。

问题原因 #

MSAL Angular的MsalInterceptor会依据protectedResourceMap的配置，对匹配的请求自动添加认证令牌。若配置了API根域名作为匹配规则，产品列表页/详情页加载数据的请求也会被拦截器判定为需认证资源，未登录时就会触发登录重定向。此外，Guard配置中合并了所有API的scopes，虽然路由未启用Guard，但拦截器的认证逻辑不受路由Guard控制。

解决办法 #

1. 细化protectedResourceMap匹配规则 #

避免使用API根域名作为匹配规则，仅指定需要认证的具体路径：

// 环境文件中修改api的uri
{
    uri: `${baseUrl.apiUrl}/api/protected/*`, // 仅匹配需认证的接口路径
    scopes: 'api://1b03747b-4f11-44e0-a4c5-da6f7de7709e/Backend.Read'
}

或在拦截器中为不同路径分别配置：

protectedResourceMap.set(`${baseUrl.apiUrl}/api/protected`, ['api://xxx/Backend.Read']);
protectedResourceMap.set(`${baseUrl.apiUrl}/api/public`, []); // 公开接口无需scopes

2. 调整Guard的scopes配置 #

Guard仅保留my-listings页所需的scopes，不要合并所有API权限：

export function MSALGuardConfigFactory(): MsalGuardConfiguration {
    // 只保留my-listings页面需要的权限
    const scopes = ['api://1b03747b-4f11-44e0-a4c5-da6f7de7709e/Backend.Read'];
    return {
          interactionType: InteractionType.Redirect,
          authRequest: { scopes },
          loginFailedRoute: '/login-failed',
      };
}

3. 确保公开页面的API请求不被拦截 #

产品列表页、详情页调用的公开接口，需确保不在protectedResourceMap的匹配范围内，或为其设置空scopes数组，明确告知拦截器无需认证。

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