时间戳

首页 > 解决方案 > 页面在注销时冻结 - AngularFire

angular - 页面在注销时冻结 - 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();
  }
}

应用程序路由.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, canActivate: [AngularFireAuthGuard]},
  {path: 'schedule', component: ScheduleComponent, canActivate: [AngularFireAuthGuard]},
  // 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 {
}

标签： angulartypescriptauthenticationangularfire

解决方案

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

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

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

推荐阅读