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
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]);
}
});
}

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

@ -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
}
});

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.
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.
<div class="alert is-helpful">
To keep things simple, this example redirects unauthenticated users to `/admin`.
</div>
Revise the `AuthGuard` to call it.