如何添加自定义http头到angular模块federation remoteEntry.js加载调用?

Question

我有一个主机应用程序和几个微前端应用程序都是angular 15。我用的是"@angular-architects/module-federation": "^15.0.3"。一切都很好，除了我无法拦截http调用，它加载了mfe应用程序的remoteEntry.js文件。

所有的mfe应用程序都部署在服务器中，服务器要完成请求，我必须将我的授权令牌添加到请求中。我尝试了几种方法，但无法拦截呼叫并添加令牌。

1. angular http拦截器不会拦截这个调用。
2. Module federation没有提供任何添加http请求的选项。

如有任何建议，不胜感激。

下面是我的路由，我加载了mfe

{
path: 'config',
loadChildren: () =>
loadRemoteModule({
remoteEntry: environment.configREmoteEntryURL,
type: "module",
exposedModule: './Module'
})
.then(m => m.AppModule)
},

Answer 1

你可以使用service worker来拦截和操作所有指向mfe的cdn的请求。

service-worer.js

let authToken = '';
// This event listeners listens to the requests towards the login
// endpoint and stores that authToken at the corresponding variable.
self.addEventListener('fetch', function (event) {
if (event.request.url === 'https://auth-endpoint/login') {
event.respondWith(
fetch(event.request)
.then(function (response) {
var responseClone = response.clone();
responseClone.json().then(function (data) {
authToken = data.token;
});
return response;
})
);
}
});
// This requests listens to the requests towards the MFEs' endpoint
// and adds the custom headers needed fot the authorization
self.addEventListener('fetch', function (event) {
if (event.request.url.startsWith('https://remotes-endpoint/')) {
let url = new URL(event.request.url);
let headers = new Headers(event.request.headers);
headers.set('Content-Type', 'application/javascript');
headers.set('Authorization', authToken);
let newRequest = new Request(url, {
method: event.request.method,
headers,
mode: 'cors',
credentials: 'same-origin',
redirect: event.request.redirect
});
event.respondWith(fetch(newRequest));
}
});

你需要在你的bootstrap.js中注册service worker

...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js')
.then(function (registration) {
console.log('Service Worker registration successful with scope: ', registration.scope);
}, function (err) {
console.log('Service Worker registration failed: ', err);
});
});
}

在webpack配置中添加CopyPlugin

const CopyPlugin = require('copy-webpack-plugin');
const config = {
...
plugins: [
...
new CopyPlugin({
patterns: [
// adjust 'service-worker.js' if your file is somewhere else
{ from: 'service-worker.js', to: '' }, 
],
}),
]
}
module.exports = config;

你很可能还需要从你的模块联合配置中删除远程，只要authToken在用户登录之前不存在于消费者应用的mount上。因此，远程请求将在挂载时失败。要解决这个问题，需要使用动态远程容器加载远程。在这个repo中有一个完整的实现。

Answer 2

目前恐怕这是不可能的。

你的用例是什么?