Цель: поддерживать динамическую загрузку модулей Javascript, зависящую от некоторых требований безопасности или определенной роли пользователя, так что даже если имя модуля идентифицируется в инструментах разработки, его нельзя успешно импортировать через консоль.
Модуль Javascript можетлегко загружать в облачную службу хранения, такую как Firebase (#AskFirebase), и код можно условно получить с помощью облачной функции Firebase firebase.functions().httpsCallable("ghost"); на основе наличия пользовательской заявки или аналогичного теста.
export const ghost = functions.https.onCall(async (data, context) => {
if (! context.auth.token.restrictedAccess === true) {
throw new functions.https.HttpsError('failed-precondition', 'The function must be called while authenticated.');
}
const storage = new Storage();
const bucketName = 'bucket-name.appspot.com';
const srcFilename = 'RestrictedChunk.chunk.js';
// Downloads the file
const response = await storage
.bucket(bucketName)
.file(srcFilename).download();
const code = String.fromCharCode.apply(String, response[0])
return {source: code};
})
В конце я хочу взять компонент React из веб-пакета, поместить его в облако, условно загрузить его клиенту после проверки безопасности на стороне сервера и import() в клиентскую среду пользователя и выполнить рендеринг.Это.
Хранить Javascript в облаке и условно загрузить его на клиент очень просто.Когда у меня есть код в веб-пакете на клиенте, я могу использовать Function(downloadedRestrictedComponent), чтобы добавить его в среду пользователя так же, как и import('./RestrictedComponent'), но я не могу понять, как получить экспорт по умолчанию изкомпонент, чтобы я мог на самом деле сделать вещь.
import(pathToComponent) возвращает загруженный модуль, и, насколько я знаю, нет возможности передать import() строку или поток, просто путь к модулю.И Function(downloadedComponent) добавит загруженный код в клиентскую среду, но я не знаю, как получить доступ к экспорту (модулям) модуля для рендеринга динамически загружаемых компонентов React.
Есть ли способ динамически импортировать модуль Javascript из загруженного потока?
изменить, чтобы добавить: Спасибо за ответ.Не знаком с нюансами Blobs и URL.createObjectURL.Любая идея, почему это не будет найдено?
const ghost = firebase.functions().httpsCallable("ghost");
const LoadableRestricted = Loadable({
// loader: () => import(/* webpackChunkName: "Restricted" */ "./Restricted"),
loader: async () => {
const ghostContents = await ghost();
console.log(ghostContents);
const myBlob = new Blob([ghostContents.data.source], {
type: "application/javascript"
});
console.log(myBlob);
const myURL = URL.createObjectURL(myBlob);
console.log(myURL);
return import(myURL);
},
render(loaded, props) {
console.log(loaded);
let Component = loaded.Restricted;
return <Component {...props} />;
},
loading: Loading,
delay: 2000
});
