Angular роутер навигация работает только после второй отправки - PullRequest
0 голосов
/ 14 марта 2020

Я пытаюсь перенаправить пользователя после входа в систему. В чем дело - у меня есть страница входа без параметра returnUrl - http://localhost:4200/login. Я заполняю форму регистрации и отправляю ее впервые. Он показывает мне электронную почту пользователя в навигационной панели (таким образом, он подтверждает, что я вошел в систему), но ничего не происходит, когда дело доходит до перенаправления - вместо этого в URL появляется returnUrl - http://localhost:4200/login?returnUrl=%2F. Только после второй отправки он перенаправляет на домашнюю страницу. В случае, когда есть параметр returnUrl - http://localhost:4200/login?returnUrl=%2Fcheck-out, после первой отправки URL-адрес остается прежним, и только после второй отправки он перенаправляет на страницу оформления заказа. Я думаю, что AuthGuard вызывает проблему, его можно вызвать перед входом в систему, поэтому он блокирует посещение подстраниц и перенаправляет меня на страницу входа с этими подстраницами в качестве возвращаемого параметра. Но как я могу это исправить?

LoginComponent

ngOnInit() {
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
    }

  tryLogin(values) {
      this.authService.loginUser(values)
        .then(res => {
            this.router.navigateByUrl(this.returnUrl);
        }, err => {
            this.loginWarn = err;
            this.loginInfo = '';
        });
  }

AuthService

 public loginUser(values) {
      return this.afAuth.auth.signInWithEmailAndPassword(values.email, values.password);
  }

Routes
const appRoutes: Routes = [
...
    { path: 'check-out', component: CheckOutComponent, canActivate: [AuthGuard] },
    { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard] },
...];

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

AuthService
   userData: any;

  constructor(public afAuth: AngularFireAuth, public router: Router) {
      this.afAuth.authState.subscribe(user => {
          if (user) {
              this.userData = user;
              localStorage.setItem('user', JSON.stringify(this.userData));
          } else {
              localStorage.setItem('user', null);
          }
      });
  }
get isLoggedIn() {
      const user = JSON.parse(localStorage.getItem('user'));
      return user !== null;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...