Перенаправление после обратного вызова AuthGuard в Angular - PullRequest
Новая
       24

Перенаправление после обратного вызова AuthGuard в Angular

1 голос
/ 06 ноября 2019

У меня есть два маршрута, для которых требуется 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?

1 Ответ

0 голосов
/ 06 ноября 2019

Не используйте маршрут snapshot, а скорее слушайте изменение маршрута. Router есть событие для которого вы можете подписаться. Обновите свой «возвратный» URL соответствующим образом.

...