iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fix routing code to use `navigate` (#35176) 

Previously, the example in the `router` guide was not
preserving the query params after logging in.

This commit fixes this by using `navigate` instead of
using `navigateByUrl`, which ignores any properties in
the `NavigationExtras` that would change the provided URL.

Fixes 34917

PR Close #35176
This commit is contained in:
Sonu Kapoor 2020-02-05 22:56:43 -05:00 committed by Miško Hevery
parent ea991f7edf
commit a7d5c55926
3 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
aio/content/examples/router/src/app/auth/login/login.component.1.ts
View File

@ -1,6 +1,6 @@
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { AuthService } from '../auth.service'; import { AuthService } from '../auth.service';
@Component({ @Component({
@ -25,12 +25,12 @@ export class LoginComponent {
this.authService.login().subscribe(() => { this.authService.login().subscribe(() => {
this.setMessage(); this.setMessage();
if (this.authService.isLoggedIn) { if (this.authService.isLoggedIn) {
// Get the redirect URL from our auth service // Usually you would use the redirect URL from the auth service.
// If no redirect has been set, use the default // However to keep the example simple, we will always redirect to `/admin`.
let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin'; const redirectUrl = '/admin';
// Redirect the user // Redirect the user
this.router.navigateByUrl(redirect); this.router.navigate([redirectUrl]);
} }
}); });
} }

15
aio/content/examples/router/src/app/auth/login/login.component.ts
View File

@ -1,8 +1,7 @@
// #docregion // #docregion
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router, import { NavigationExtras, Router } from '@angular/router';
NavigationExtras } from '@angular/router'; import { AuthService } from '../auth.service';
import { AuthService } from '../auth.service';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
@ -26,9 +25,9 @@ export class LoginComponent {
this.authService.login().subscribe(() => { this.authService.login().subscribe(() => {
this.setMessage(); this.setMessage();
if (this.authService.isLoggedIn) { if (this.authService.isLoggedIn) {
// Get the redirect URL from our auth service // Usually you would use the redirect URL from the auth service.
// If no redirect has been set, use the default // However to keep the example simple, we will always redirect to `/admin`.
let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin'; const redirectUrl = '/admin';
// #docregion preserve // #docregion preserve
// Set our navigation extras object // Set our navigation extras object
@ -39,7 +38,7 @@ export class LoginComponent {
}; };
// Redirect the user // Redirect the user
this.router.navigateByUrl(redirect, navigationExtras); this.router.navigate([redirectUrl], navigationExtras);
// #enddocregion preserve // #enddocregion preserve
} }
}); });

8
aio/content/guide/router.md
View File

@ -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. 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 Its `login` method simulates an API call to an external service by returning an
observable that resolves successfully after a short pause. 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.
<div class="alert is-helpful">
To keep things simple, this example redirects unauthenticated users to `/admin`.
</div>
Revise the `AuthGuard` to call it. Revise the `AuthGuard` to call it.