页面在注销时冻结 - AngularFire

如何解决页面在注销时冻结 - AngularFire

每次我尝试注销时，页面都会冻结，并且在刷新之前我无法转到另一个页面。我正在使用 Angular 和 Firebase Firestore 及其身份验证功能。

编辑：
我已经添加了我的 app-routing.module.ts 以获取更多信息，希望能澄清问题到底是什么。

auth.service.ts

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

  authState: any = null; // Used to hold the users data

  // calls the AngularFireAuth to get info about user credentials
  constructor(private afAuth: AngularFireAuth,private router: Router,public fireService: AngularFirestore) {
    this.afAuth.authState.subscribe((auth => {
      this.authState = auth;
    }));
  }

  // is called when company register. creates firebase auth login with email and password
  // this also creates a document with the information from the registration in the collection companies
  registerWithEmail(email: string,password: string,companyUser: CompanyUserInterface) {
    return this.afAuth.createUserWithEmailAndPassword(email,password).then((data) => {
      this.authState = data;
      // Gets user id and added to company for unique id
      companyUser.UID = data.user.uid;
      return this.fireService.collection('companies').add(Object.assign({},companyUser));
    }).catch(error => {
      console.log(error);
      throw error;
    });
  }

  // is called in login and checks if login info is correct in firebase
  loginWithEmail(email: string,password: string) {
    return this.afAuth.signInWithEmailAndPassword(email,password).then((data) => {
      this.authState = data;
    })
      .catch(error => {
        console.log(error);
        throw error;
      });
  }

  // TODO: is bugged. if time look into. (has to refresh page on logout to be able to move)
  logout(): void {
    this.afAuth.signOut().then();
    this.router.navigate(['/login']).then();
  }
}

app-routing.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {HomeComponent} from './views/home/home.component';
import {AboutComponent} from './views/about/about.component';
import {PagenotfoundComponent} from './views/pagenotfound/pagenotfound.component';
import {ContactComponent} from './views/contact/contact.component';
import {LoginComponent} from './views/login/login.component';
import {RegisterComponent} from './views/register/register.component';
import {UserinfoComponent} from './views/userinfo/userinfo.component';
import {BoardComponent} from './views/board/board.component';
import {ScheduleComponent} from './views/schedule/schedule.component';
import {TermComponent} from './views/term/term.component';
import {AngularFireAuthGuard} from '@angular/fire/auth-guard';

const routes: Routes = [
  // free for all visitor
  {path: 'home',component: HomeComponent},{path: 'about',component: AboutComponent},{path: 'contact',component: ContactComponent},{path: 'login',component: LoginComponent},{path: 'register',component: RegisterComponent},{path: 'terms',component: TermComponent},// has to be logged in to access these paths
  {path: 'userinfo',component: UserinfoComponent,canActivate: [AngularFireAuthGuard]},{path: 'board',component: BoardComponent,{path: 'schedule',component: ScheduleComponent,// other
  {path: '',redirectTo: '/home',pathMatch: 'full'},// redirect to `first-component`
  {path: '**',component: PagenotfoundComponent},// Wildcard route for a 404 page
];

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})

export class AppRoutingModule {
}

 

解决方法

尝试像这样重构您的 logout() 函数：

  logout(): void {
    this.afAuth.signOut().then(() => {
      this.router.navigate(['/login']);
    });
  }

本质上，这不是一个接一个地调用两个异步函数，而是将它们链接起来。