How to secure my code in Angular2?

Question

Imagine have an app, which has heavy admin interface with so much cool features, and simple user interface, like one button. I know i can restrict my access to my urls (components), based on something.(key, hash or whatever). What i want to achieve, is: If backend decide i am a regular user - it sends only small app (with only one component with button for example) and user do not receive all heavy components code for (whole site features). So he will be not able to analyse my admin javascript. If backend deicdes I'm staff - front-end should receive all necessary components for staff. If I'm admin, I should receive all components.

Answer 1

The questions is:

Do you really need it?

The general pattern is to send whole js bundled file (you can obfuscate it, minify etc.) but it still will include templates and code you've implemented. For most cases it's not the problem because there are really no sensitive data. The point is to properly secure REST API endpoints.

If you really wanted to

You can use e.g. webpack or any other bundling system that will allow you to create separate bundles and will load proper chunk of code only when it's needed (e.g. after successful login). Here you have webpack async loading.This resource will be protected by the hosting server (will require authorized user - just like REST API calls).