auth0-blog / angular2-authentication-sample

This is a sample that shows how to add authentication to an Angular 2 (ng2) app
MIT License
966 stars 334 forks source link

Router do url change after login but can not reload to home #78

Closed toni-moreno closed 7 years ago

toni-moreno commented 7 years ago

I've completely copied your schema to my project in order to provide authentication capabilities.

https://github.com/toni-moreno/snmpcollector/blob/angular2_final_migration/public/app/app.routes.ts

I'have default path to load login form

export const routes: Routes = [
  { path: '',       component: Home },
  { path: './login',  component: Login },
  { path: './home',   component: Home, canActivate: [AuthGuard] },
  { path: '**',     component: Login },
];

It loads ok , and do session creation request .

request URL:http://localhost:8090/session/create
Request Method:POST
Status Code:200 OK

stores token in LocalStorage and do this.router.navigate(['/home']);

now browser url change but nothing more happens

If I change config to first load home

import { Routes } from '@angular/router';
import { Home } from '../home/home';
import { Login } from '../login/login';
import { AuthGuard } from '../common/auth.guard';

export const routes: Routes = [
  { path: '',       component: Home },
  { path: './login',  component: Login },
  { path: './home',   component: Home, canActivate: [AuthGuard] },
  { path: '**',     component: Login },
];

it reloads ok the home page it seems like the real reload is not done. No errors in the browser console.

NOTE: I'm migrating now from angular2.0.0.-betaXXX to final release and I've updated also your authentication sample, the old version was working ok

toni-moreno commented 7 years ago

I've changed my routes to

export const routes: Routes = [
  { path: '',   component: Login },
  { path: './login',  component: Login },
  { path: './home',   component: Home, canActivate: [AuthGuard] },
];

First Path '' linked to Login and removed last, and now routing is crashing

image

When debugging inside the login.ts login method we are doing a call to this.router.navigate() but this.router == undefined as you can see in the following screenshot.

Can anybody tell me whats the matter?

image

toni-moreno commented 7 years ago

I've finally fix with

import { Routes } from '@angular/router';
import { Home } from '../home/home';
import { Login } from '../login/login';
import { AuthGuard } from '../common/auth.guard';

export const routes: Routes = [
  { path: '',   component: Login },
  { path: 'login',  component: Login },
  { path: 'home',   component: Home, canActivate: [AuthGuard] },
];

Thank you !!