0

I'm building a site with MEAN stack, and overall this is my structure:

  • root
    • app
      • auth
        • auth.routes.ts
        • auth.service.ts
      • app.component.html
      • app.component.ts
      • app.routing.ts

On my app.routung.ts I have this code:

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/main_url', pathMatch: 'full' },
    { path: 'main_url', component: MainComponent, canActivate: [AuthenticationGuard] },
    { path: 'cars', component: CarsComponent },
    { path: 'auth', component: AuthenticationComponent, children: AUTH_ROUTES },
];

Then, in my app.js main file I have these routes:

app.use('/main_url', mainRoutes);
app.use('/cars', carRoutes);
app.use('/', appRoutes);

The content of appRoutes is this:

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index');
});

module.exports = router;

The index file, renders an html with a menu on the left sidebar. In the content part, I have a <my-app>Loading...</my-app>, which loads the app.component.ts and all the logic there.

The question here is, how can I secure my index.html main route, with a login page, when I don't want to include it inside my <my-app>Loading...</my-app>?

I'm I doing something wrong? Or there is a good way to do that?

UPDATE

A brief description of my problem:

I have a node router, which only has a get method, then, is redirected to index:

... code ...
res.render('index');

index.html, is a template with a header, sidebar menu, footer and content. In the content, I have this: <my-app>Loading...</my-app>, this line triggers my angular component, which uses my Angular Routes (APP_ROUTES), the one I posted before.

All at this point works fine, but, how can I prevent to trigger the index.html from my res.render('index'), when the user is not logged in and send it to a complete separated login.html page/code? I think I have to change something because always I'm going to be redirected to index, no matter what, because it is the entry point.

Mika Sundland
  • 18,120
  • 16
  • 38
  • 50
Jesús Cota
  • 515
  • 1
  • 4
  • 14
  • How are you handling an expired session token or navigation to a route by a user that isn't authenticated/authorized? I've typically done this either in a route change or some form of interceptor. If you have that worked out it should be relatively easy to direct to login when the application is first opened. – jbrown Oct 10 '17 at 19:55
  • I'm validating it with time expiry, and router guard: `canActivate: [AuthenticationGuard]`, but the point is, i dont want to get on my admin panel, without authorization, but i get pass through because my entry point is my index route. – Jesús Cota Oct 10 '17 at 20:06
  • Oh right ... I missed that. What about applying a componentless parent route and apply the guard there, like in the answer to this post (https://stackoverflow.com/questions/43487827/how-to-apply-canactivate-guard-on-all-the-routes)? That would redirect all unauthenticated trafiic to the login page. – jbrown Oct 10 '17 at 20:11
  • I think I finally see the problem - on initial load, router is not involved so AuththenticationGuard does not get run? – Richard Matsen Oct 10 '17 at 22:31
  • What do you mean with: router is not involved? – Jesús Cota Oct 10 '17 at 23:09
  • I put an authguard on my '/dashboard' route, which is my redirect for '/', and a console log in the guard, and it didn't show up. So I conclude when index loads, router is not active yet therefore guard is not active yet. However, seems to be difficult to test because of browser caching, so I'm still testing. – Richard Matsen Oct 10 '17 at 23:29
  • In other words, I'm still not clear about your problem. – Richard Matsen Oct 10 '17 at 23:30
  • Sorry, I assumed Angular router - I see above express.router, so not a SPA? – Richard Matsen Oct 10 '17 at 23:35
  • I think I've tested your APP_ROUTES configuration and it works fine for me. The AuthenticationGuard fires on initial load and asks for login, thereafter passes through to the page. Perhaps there's something happening between the express routes and the angular routes? Can't tell unless you provide more explicit description of the problem. – Richard Matsen Oct 11 '17 at 00:14
  • I've just updated my question, with a short description of what i want to achieve. Thanks @RichardMatsen! – Jesús Cota Oct 11 '17 at 01:16
  • Cheers, that's a great description. I think this is related to Angular's 'redirect to index' feature that ensures the server doesn't follow angular-initiated url's. I'll have to look it up to refresh myself. – Richard Matsen Oct 11 '17 at 01:23
  • Have a look at https://stackoverflow.com/questions/46527826/best-method-to-set-different-layout-for-different-pages-in-angular-4 – Jonathas Pacífico Apr 18 '18 at 17:41

1 Answers1

0

Please try Angular's HashLocationStrategy, which puts a '#' in the URL to separate the bit's the server responds to from the bits Angular responds to (to put it crudely).

Ng-book gives a good description, the essentials are

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    provide(LocationStrategy, {useClass: HashLocationStrategy})
  ]

Please also see the answer to this SO question, which mentions server configuration (as an alternative).

Ensure your server is configured to support HTML5 pushState. This just means that the server returns index.html for requests to unknown resources.

Here is another good reference Location Strategies in Angular Router, probably the best I can find to describe the problem.

Richard Matsen
  • 20,671
  • 3
  • 43
  • 77