Javascript 角度身份验证。防护装置无持久身份验证

刷新页面后，身份验证似乎不会持续。每当我登录时，它都会成功地重定向我。但是，当我刷新时，访问就不可能了

这是授权警卫

路由器

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './components/nav/nav.component';
import { HomeComponent } from './components/home/home.component';
import { GalleryComponent } from './components/gallery/gallery.component';
import { FooterComponent } from './components/footer/footer.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { FIREBASECONFIG as firebaseConfig } from './config/firebase-config';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ScrollToModule } from 'ng2-scroll-to';
import { NgxCarouselModule } from 'ngx-carousel';
import { AnimateOnScrollModule } from 'ng2-animate-on-scroll';

import { AuthService } from './services/auth.service';
import { AuthGuard } from './services/auth.guard.service';

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'gallery', component: GalleryComponent, canActivate: [AuthGuard] }
];

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    HomeComponent,
    GalleryComponent,
    FooterComponent,
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    NgxCarouselModule,
    NgbModule.forRoot(),
    ScrollToModule.forRoot(),
    RouterModule.forRoot(routes),
    AnimateOnScrollModule.forRoot(),
    HttpClientModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    TranslateModule
  ],
  providers: [AngularFireDatabase, AuthService, AuthGuard],
  bootstrap: [AppComponent]
})

auth.guard.ts

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

@Injectable()
export class AuthGuard implements CanActivate {
  public user = null;
  constructor(private fireauth: AngularFireAuth, private router: Router) {
    this.fireauth.auth.onAuthStateChanged((user) => {
      if (user) {
        this.user = this.fireauth.auth.currentUser;
      }
    });
  }

  ongOnInit() {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    if (this.user) {
      return true;
    } else {
      this.router.navigate(['']);
      return false;
    }
  }
}

根据我的说法，路由是正常的，我想问题最严重的应该是auth-guard。

试试这段代码

constructor(
    private router:Router,
    public fireauth:AngularFireAuth
){}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return this.fireauth.authState.map((auth) =>  {
        if(auth == null) {
          this.router.navigate(['/']);
          return false;
        } else {
          return true;
        }
      });
}

构造函数(
专用路由器：路由器，
公共fireauth:AngularFireAuth
){}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：布尔值|可观察|承诺{
返回此.fireauth.authState.map（（auth）=>{
if（auth==null）{
this.router.navigate（['/']）；
返回false；
}否则{
返回true；
}
});
}

我认为

this.fireauth.auth.onAuthStateChanged

在旧版本中使用

试试这段代码

constructor(
    private router:Router,
    public fireauth:AngularFireAuth
){}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
    return this.fireauth.authState.map((auth) =>  {
        if(auth == null) {
          this.router.navigate(['/']);
          return false;
        } else {
          return true;
        }
      });
}

构造函数(
专用路由器：路由器，
公共fireauth:AngularFireAuth
){}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：布尔值|可观察|承诺{
返回此.fireauth.authState.map（（auth）=>{
if（auth==null）{
this.router.navigate（['/']）；
返回false；
}否则{
返回true；
}
});
}

---

我认为

this.fireauth.auth.onAuthStateChanged

在旧版本中使用

也发布您的路由器配置。登录后您将用户发送到哪个路由？用户登录后，我将用户发送到gallery路由可以指定您的

angularfire2

版本。是的，在使用angularfire2 V 5.0.0时也发布您的路由器配置。在哪个路由中您是否在登录后使用用户？在用户登录后，我将用户发送到gallery Route，您可以指定您的

angularfire2

版本。在使用angularfire2 V 5.0.0时是