Angular2 routing go through login on each url

Question

In our app, we have multiple routies definitions. And i think we messed up something. We are unable to write a url by hand and get the proper component to be loaded. We are every time redirected to /login which then redirects back to /account if user is logged in.

Do you see some possible improvements in our routing? I guess it's not really efficient and "well made". We got our brain burnt by our own routing path and exterior point of view would be appreciated.

Secret is our Core app, in which we simply display a secret request form to user.

For example, trying to access /account/secret/terms redirects us to login then back to account because the user is currently logged in...

Here are our routes:

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { AccountComponent } from './account/account.component';

import { accountRoutes } from './account/account.routes';
import { CanActivateViaAuthGuard } from './login/services/auth-guard.service';

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'account',
    component: AccountComponent,
    canActivate: [CanActivateViaAuthGuard],
    children: accountRoutes
  },

  // otherwise redirect to home
  { path: '**', redirectTo: '/' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

First side question: on '' route, should we redirect to login instead of direct calling the LoginComponent?

./account/account-routes.ts

import { Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { SecretComponent } from './secret/secret.component';

import { secretRoutes } from './secret/secret.routes';

export const accountRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'secret', component: SecretComponent, children: secretRoutes },

  // otherwise call DashboardComponent
  { path: '**', component: DashboardComponent }
];

And finally,

account/secret/secret.routes.ts:

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

Yakov Fain Yakov Fain · Accepted Answer · 2016-12-05T20:13:36

Most likely your problem is caused by the fact that you use default PathLocationStrategy. With that, when you enter the direct URL of the route in the browser's address bar, it still makes a request to the server, which can't find the resource (and rightly so) named as you route. The server is possibly configured to redirect to the home page whenever the resource is not found.

If you switch to HashLocationStrategy, no requests to the server will be made and entering the direct route URL in the browser will work.

Just add this to your @NgModule annotation:

providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]

Angular2 routing go through login on each url

1 Answers