时间戳

首页 > 解决方案 > Angular 中的 AuthGuard 回调后重定向

angular - Angular 中的 AuthGuard 回调后重定向

问题描述

我有两条需要 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

现在，除了一件事之外，一切都运行良好。认为

事情是，

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

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

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

标签： angularauth-guard

解决方案

不要使用路由snapshot，而是听路由变化。Router有你可以订阅的事件。相应地更新您的“返回”URL。

推荐阅读