在 Angular 中的 AuthGuard 回调后重定向

Question

我有两条路线需要 Angular canActivate: [AuthGuard]

const routes: Routes =  [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  {
    path: 'projects', 
    children: [
      { path: '', component: ProjectsComponent , canActivate: [AuthGuard] },
      { path: 'sjcl', component: HashgenComponent, canActivate: [AuthGuard]  },
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

如您所见，如果用户未登录，他将被重定向到 /login 路由，该路由由我的 AuthGuard

if (this.auth.isLoggedIn) { return true; }

return this.auth.currentUserObservable.pipe(
  take(1),
  map(user => {
    console.log('user: ', user);
    return !!user
  }),
  tap(loggedIn => {
    console.log("loggedIn: ", loggedIn);
    if (!loggedIn) {
      console.log("access denied");
      //this.router.navigate(['/login']);
      this.router.navigate(['login'], { queryParams: { returnUrl: state.url } });
    }
  })
);

而我的login组件如下，

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseUISignInSuccessWithAuthResult, FirebaseUISignInFailure } from 'firebaseui-angular';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  returnUrl: string;

  constructor(
    public auth: AuthService, 
    private router: Router,
    private route: ActivatedRoute,
    public afAuth: AngularFireAuth) {
      this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
      console.log("yes i am here");
      console.log(this.returnUrl);
     }

  ngOnInit() {}
  ngAfterViewInit(){

  }
  successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
    console.log("Logged in!"+this.returnUrl);
    this.router.navigateByUrl(this.returnUrl);
  }

  errorCallback(errorData: FirebaseUISignInFailure) {
    console.log("Login failure!");
  }
}

PROBLEM

现在，除了一件事，一切都运行良好。假设

我从 /home 开始，然后单击 /projects 并登录，登录后我被重定向到 /projects。（这里没问题）
我从 /home 开始，然后单击 /projects/sjcl 并登录，登录后我被重定向到 /projects/sjcl。（这里没问题）
我从 /home 开始，点击 /projects，然后点击 /projects/sjcl 并登录，我在登录后被重定向到 /projects，而我应该'已重定向至 /projects/sjcl（此处有问题）

事实是，

  this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  console.log("yes i am here");
  console.log(this.returnUrl);

如果 LoginComponent 已经加载并从另一个 Authguard 再次调用，则不会被调用。我尝试使用不同的生命周期，甚至将它放在构造函数上仍然没有帮助。

每次加载 LoginComponent 时应该如何调用上面的代码片段？

Answer 1

不要使用路线 snapshot 而是听路线变化。 Router 有您可以订阅的活动。相应地更新您的 "return" URL。

在 Angular 中的 AuthGuard 回调后重定向

Redirect after AuthGuard callback in Angular

angular

auth-guard