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