在Firebase和angularjs7中登录后如何重定向到请求的页面

时间:2018-11-18 03:54:46

标签: firebase-authentication url-redirection angular7

。我尝试使用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');
        });
    }

}

0 个答案:

没有答案