Как перенаправить на запрашиваемую страницу после входа в firebase и angularjs7 - PullRequest
Новая
       17

Как перенаправить на запрашиваемую страницу после входа в firebase и angularjs7

0 голосов
/ 18 ноября 2018

. Я пытаюсь перенаправить на запрошенную страницу после успешного входа в систему, используя firebase и angularjs7. Я защитил ссылки с помощью Route Guard.

Например: если кто-то попытается напрямую связаться с http://localhost:4200/check-out,, то он проверит, аутентифицирован ли пользователь, если true, тогда он позволит посетить страницу; но если пользователь не аутентифицирован, то он направит его к входу в систему, а если он войдет в систему, то должен быть перенаправлен на запрашиваемую страницу, т.е. / check-out.

Но это не работает. Пожалуйста, помогите.

Ниже приведен фрагмент кода.

Компонент входа 

import { AuthService } from './../auth/auth.service';
import { Component, OnInit } from '@angular/core';

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

    constructor(private authService: AuthService) { }

    login() {
        this.authService.login();
    }
}

Компонент Auth Guard 

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

    constructor(private authService: AuthService, private router: Router) { }

    canActivate(route, state: RouterStateSnapshot): any {
        this.authService.user$.subscribe(user => {
            if (user) {
                return true;
            }
            console.log('Guard Activated Url: ' + state.url);
            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
            return false;
        });
    }

}

AuthService 

import { Injectable } from '@angular/core';
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { ActivatedRoute, Router } from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class AuthService {

    user$: Observable<firebase.User>;

    constructor(private afAuth: AngularFireAuth, private route: ActivatedRoute, private router: Router) {
        this.user$ = afAuth.authState;
    }

    login() {
        const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
        this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
        this.afAuth.auth.getRedirectResult().then(success => {
            this.router.navigateByUrl(returnUrl);
        });
    }

    logout() {
        this.afAuth.auth.signOut().then(success => {
            this.router.navigateByUrl('/login');
        });
    }

}
...