37. DefineAsyncComponent | Loading Component dynamically in the Vue Composition API - Vue 3

[@nick066hu]

Hi Leela., thank you for the excellent tutorial. I wonder if you could help me out with some clues in the right direction. I am working on a project where I am loading the Admin area component dynamically. Only a few authorized users can view the Admin area, it works ok, it is quite a big component with children, makes a lot of sense to load it only when needed. My backend API will only allow admin operations with the proper authorization (done with JWT tokens). BUT: I wonder if it is possible to allow the Admin component loading only after authorization. How can I prevent any curious unauthorized user to download the Admin component? I guess I would need to change the import function to include the auth headers in the request to the server, and to somehow include Authorization into the server also. (I am using Windows Server IIS, and .NET 7 for the api, I guess I can serve the component itself from the api ro do this, and not from the same folder where the public components are located) I understand that someone being able to download the Admin component alone can not do anything wrong without knowing the auth tokens, but nevertheless I would not want any unauthorized user to be able to download my dynamic component to explore its functions and peek around its code. Thank you for any clues.