this.router.navigate returns false

Question

我试图在用户成功登录后将用户重定向到上一条路。

My auth.guard.ts

const currentUser = this.authenticationService.currentUserValue;
if (currentUser) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
return false;

设置正确的返回网址

然后我的登录.component.ts

[...]
// get return url from route parameters or default to '/'
this.route.queryParams
.subscribe(params => {
this.returnUrl = params['redirectUrl'] || '/'
console.log(this.returnUrl)
console.log(params)
} );
[...]
this.authenticationService.login(this.f.email.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
//TODO: navigate returns false
this.router.navigate([this.returnUrl]).then(nav => {
console.log(nav); // true if navigation is successful
}, err => {
console.log(err) // when there's an error
});
},
error => {
this.spinner = false;
this.submitted = false;
this.invalid = true;
this.loading = false;
},
() => {
this.spinner = false;
this.submitted = false;
});

在这里，导航返回 false，不执行任何其他操作。 我试图看看这个.returnUrl是否设置正确，确实如此。所以我不知道是什么会导致这个问题。如果我设置了这个.router.navigate['/something']，那么它就可以正常工作。

Answer 1

login.component.ts

在 ngOnInit(( 中

this.route.queryParams.subscribe(
params => (this.returnUrl = params.return || '/')
);

然后

this.authenticationService.login(this.f.email.value, this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.spinner = false;
this.submitted = false;
this.invalid = true;
this.loading = false;
} 
});

在这里，您使用returnUrl作为您的查询参数

this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});

但是您试图获取重定向网址

params['redirectUrl']

将params['redirectUrl']更改为params['returnUrl']