ReturnUrl 角度

Question

我目前正在进行的项目，我想将 returnUrl 应用于登录。我在这里附上了代码。当我尝试在 ngOnInit() 中初始化 returnUrl 时，它无法正常工作。但是，如果我在登录方法中初始化 returnUrl，它就可以工作。这可能是什么问题？

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { LoginUser } from '../_models/LoginUser';
import { AlertifyService } from '../_services/alertify.service';
import { AuthService } from '../_services/auth.service';

@Component({
  selector: 'app-nav',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

export class NavBarComponent implements OnInit {
  user: LoginUser = { username: '', password: '' };
  photoUrl: string;

  constructor(
    public authService: AuthService,
    private alertify: AlertifyService,
    private router: Router,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.authService.currentPhotoUrl.subscribe(photoUrl => this.photoUrl = photoUrl);
  }

  login() {
    let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/members';
    this.authService.login(this.user).subscribe(data => {
      this.router.navigateByUrl(returnUrl);
    }, error => {
      this.alertify.error('Login Failed');
    }, () => {
      this.alertify.success('Login Successful');
    });
  }

  logout() {
    this.authService.userToken = null;
    this.authService.currentUser = null;

    localStorage.removeItem('token');
    localStorage.removeItem('user');

    this.alertify.message('logged out');
    this.router.navigate(['/home']);
  }

  loggedIn() {
    return this.authService.loggedIn();
  }

}

Answer 1

为什么不使用 AuthGuard 并覆盖 canActivate

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    .....
    .....        
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}