diff --git a/aio/content/examples/router/src/app/auth/login/login.component.1.ts b/aio/content/examples/router/src/app/auth/login/login.component.1.ts index 0879347c70..fbc45c5d36 100644 --- a/aio/content/examples/router/src/app/auth/login/login.component.1.ts +++ b/aio/content/examples/router/src/app/auth/login/login.component.1.ts @@ -1,6 +1,6 @@ // #docregion -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; import { AuthService } from '../auth.service'; @Component({ @@ -25,12 +25,12 @@ export class LoginComponent { this.authService.login().subscribe(() => { this.setMessage(); if (this.authService.isLoggedIn) { - // Get the redirect URL from our auth service - // If no redirect has been set, use the default - let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin'; + // Usually you would use the redirect URL from the auth service. + // However to keep the example simple, we will always redirect to `/admin`. + const redirectUrl = '/admin'; // Redirect the user - this.router.navigateByUrl(redirect); + this.router.navigate([redirectUrl]); } }); } diff --git a/aio/content/examples/router/src/app/auth/login/login.component.ts b/aio/content/examples/router/src/app/auth/login/login.component.ts index ca3eb70a34..652afc66f3 100644 --- a/aio/content/examples/router/src/app/auth/login/login.component.ts +++ b/aio/content/examples/router/src/app/auth/login/login.component.ts @@ -1,8 +1,7 @@ // #docregion -import { Component } from '@angular/core'; -import { Router, - NavigationExtras } from '@angular/router'; -import { AuthService } from '../auth.service'; +import { Component } from '@angular/core'; +import { NavigationExtras, Router } from '@angular/router'; +import { AuthService } from '../auth.service'; @Component({ selector: 'app-login', @@ -26,9 +25,9 @@ export class LoginComponent { this.authService.login().subscribe(() => { this.setMessage(); if (this.authService.isLoggedIn) { - // Get the redirect URL from our auth service - // If no redirect has been set, use the default - let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin'; + // Usually you would use the redirect URL from the auth service. + // However to keep the example simple, we will always redirect to `/admin`. + const redirectUrl = '/admin'; // #docregion preserve // Set our navigation extras object @@ -39,7 +38,7 @@ export class LoginComponent { }; // Redirect the user - this.router.navigateByUrl(redirect, navigationExtras); + this.router.navigate([redirectUrl], navigationExtras); // #enddocregion preserve } }); diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md index c1765d6347..15711db702 100644 --- a/aio/content/guide/router.md +++ b/aio/content/guide/router.md @@ -3302,7 +3302,13 @@ Although it doesn't actually log in, it has what you need for this discussion. It has an `isLoggedIn` flag to tell you whether the user is authenticated. Its `login` method simulates an API call to an external service by returning an observable that resolves successfully after a short pause. -The `redirectUrl` property will store the attempted URL so you can navigate to it after authenticating. +The `redirectUrl` property stores the URL that the user wanted to access so you can navigate to it after authentication. + +
+ +To keep things simple, this example redirects unauthenticated users to `/admin`. + +
Revise the `AuthGuard` to call it.