Angular Firebase 身份验证始终重定向到主页

Question

在我通过教程练习的这个 Angular 项目中，当我尝试访问需要身份验证的页面时，我被重定向到登录页面，甚至 URL 更改为 http://localhost:4200/login?returnURL=%2Fcheck-out。

但登录后，无论链接如何，它总是重定向到主页。

app.component.ts：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '../../node_modules/@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private auth:AuthService, router:Router){
    auth.user$.subscribe(user=>{
      if(user){
        let returnUrl=localStorage.getItem('returnUrl');
        router.navigateByUrl(returnUrl);
      }
    });
  }
}

auth.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '../../node_modules/angularfire2/auth';
import { Observable } from '../../node_modules/rxjs';
import * as firebase from 'firebase';
import { ActivatedRoute } from '../../node_modules/@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<firebase.User>;
  constructor(private afAuth:AngularFireAuth,private route:ActivatedRoute) {
    this.user$=afAuth.authState;
   }

  login(){
    let returnUrl=this.route.snapshot.queryParamMap.get('returnUrl') ||'/';
    localStorage.setItem('returnUrl',returnUrl);

    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

}

  logout(){
    this.afAuth.auth.signOut();
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {AngularFireAuthModule, AngularFireAuth} from 'angularfire2/auth';
import { Observable} from 'rxjs'; 
import {RouterModule, RouterOutlet, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { BsNavbarComponent } from './bs-navbar/bs-navbar.component';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { CheckOutComponent } from './check-out/check-out.component';
import { OrderSucessfulComponent } from './order-sucessful/order-sucessful.component';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { LoginComponent } from './login/login.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth-guard.service';
export const appRoutes: Routes = [

  {path:'',component:HomeComponent},
  {path:'products',component:ProductsComponent},
  {path:'shopping-cart',component:ShoppingCartComponent},
  {path:'login',component:LoginComponent},

  {path:'check-out',component:CheckOutComponent,canActivate:[AuthGuard]},
  {path:'order-sucessful',component:OrderSucessfulComponent,canActivate:[AuthGuard]},
  {path:'my/orders',component:MyOrdersComponent,canActivate:[AuthGuard]},

  {path:'admin/products',component:AdminProductsComponent,canActivate:[AuthGuard]},
  {path:'admin/orders',component:AdminOrdersComponent,canActivate:[AuthGuard]}

  ]



@NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSucessfulComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent,
   LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,
    NgbModule.forRoot()

  ],

  providers: [AngularFireAuth,AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

似乎在您的localStorage.getItem('returnUrl'); 中始终设置为应用程序的根，最好先检查是否有值，然后删除该值并重定向用户，如下所示：

let returnUrl = localStorage.getItem('returnUrl');

if (returnUrl) {
  localStorage.removeItem('returnUrl');
  router.navigateByUrl(returnUrl);
}

希望对你有帮助！