Angular App with authentication that serves files only after login

Question

What I want to do is to have a login page for authentication (communicating with an API using JWT) and after that comes the tricky part, I only want to load the rest of the web site done in Angular 2+, after being logged.

I really only want the files(JS, CSS, HTML) to be served on the client after the login, this is important, because I don't want that files to be exposed to everyone in the WEB. Is something like this possible to do in an Node Angular app? If yes, how can it be implemented?

If it's not possible with Node, is it possible with other technology that works with angular (I'm thinking about laravel)?

Answer 1

In my precedent work that was the flow:Node was serving all the files after login.

Simply check if token is valid (token in the header), if it is allow access to the index.html otherwise redirect user to a login page.

Don't include the login page to the angular app. It can be a simple html file with an ajax call (jQuery) in order to send the credentials. If credentials are OK, on the success response redirect user to the index.html including token in headers for authentication

Answer 2

To protect your module in an Angular app from even loading into browser, you should use canLoad guard like this:

path: 'customers',
canLoad: [AuthGuard],
loadChildren: 'app/customers/customers.module#CustomersModule'

where CustomersModule is NgModule including all components you want to 'hide'. The code for this module will be separated in a chunk file and will only be loaded if the AuthGuard.canLoad returns true.

You can have a look at this simple app https://solid-flow.github.io/secure-app/customers and see in the dev console how different parts of the source code are loaded. The github repo can be found here https://github.com/solid-flow/secure-app