angular - AngularFire Auth 在重定向之前为我的平台令牌交换 FireBase 令牌

Question

我正在使用AngularFire来促进对 Firebase Auth 用户池的身份验证，并且身份验证工作正常。

但是，在 Firebase 身份验证和从登录页面重定向到我的受保护的 webapp 页面之一之前，我需要将 Firebase 令牌交换为来自我的平台的 JWT 令牌。

我认为这样做的方法是在router guard中实现调用我的平台令牌 API 的逻辑。

但是，当我这样做时，我收到此错误：

类型错误：source.lift 不是函数

这是我的app-routing.module.ts，如果我替换switchMapformap并删除async/await（不要让它返回一个承诺或在回调中执行异步逻辑）一切正常 - 但是我不会调用我的 API。

import { NgModule, Injector } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { canActivate, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';
import { switchMap } from 'rxjs/operators';
import * as firebase from 'firebase';

import { LoginComponent } from './login/login.component';
import { InvestconfigComponent } from './investconfig/investconfig.component';
import { setWebIdentityCredentials } from './shared/auth.service';

//THIS IS THE IMPORTANT method
const redirectLoggedInAferSetAwsCreds = switchMap(async (user: firebase.User) => {
  // Call off to my backend to exchange FBase token for platform token..
  await setWebIdentityCredentials(user);
  return user ? ['config'] : true;
});
const redirectUnauthorizedToLogin = redirectUnauthorizedTo(['login']);

const routes: Routes = [
  { path: '', redirectTo: '/config', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInAferSetAwsCreds) },
  { path: 'config', component: InvestconfigComponent, ...canActivate(redirectUnauthorizedToLogin) },
  { path: '**', redirectTo: '/config' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

为什么这不起作用？有没有更好的方法来解决我的问题？

标签： angularrxjsfirebase-authenticationangularfire2angularfire

Answer 1

我让它工作了，但是当 AngularFire 身份验证警卫被调用时，我完全误解了。国际海事组织你不应该大声疾呼以获得你的警卫内的信誉。

如果您需要等待承诺，这是可以工作的守卫：

const guardAndSetAwsCreds = pipe(
  tap(async (user: firebase.User) => {
    await setWebIdentityCredentials(user);
  }),
  map((user: firebase.User) => {
    return user ? true : ['login'];
  }),
);

tap()不会产生副作用，并将 orig obj（user在本例中）传递到map().

我的错误印象是，当 AuthFire 身份验证方法成功完成时，通过订阅调用了 AuthFire 守卫。事实并非如此。这是一个示例AuthFire auth method：

this.afAuth.auth.signInWithEmailLink(email, window.location.href)

因为我不再遇到时间问题，所以我只需在我的登录方法中调用以获取平台令牌：

  async signinWithEmailLink() {
    // Confirm the link is a sign-in with email link.
    if (this.afAuth.auth.isSignInWithEmailLink(window.location.href)) {
      // Additional state parameters can also be passed via URL.
      // This can be used to continue the user's intended action before triggering
      // the sign-in operation.
      // Get the email if available. This should be available if the user completes
      // the flow on the same device where they started it.
      let email = window.localStorage.getItem('emailForSignIn');
      if (!email) {
        // User opened the link on a different device. To prevent session fixation
        // attacks, ask the user to provide the associated email again. For example:
        email = window.prompt('Please provide your email for confirmation');
      }

      // The client SDK will parse the code from the link for you.
      const res = await this.afAuth.auth.signInWithEmailLink(email, window.location.href)

      window.localStorage.removeItem('emailForSignIn');

      if (res.additionalUserInfo.isNewUser) {
        //User does NOT already exist in system (added by admin) might be sign-up from random dude from internet
        throw new Error('An admin must add you first');
      }

      await setWebIdentityCredentials(res.user);
    }
  }

我的路线守卫现在超级简单：

const routes: Routes = [
  { path: '', redirectTo: '/config', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInTo(['config'])) },
  { path: 'config', component: InvestconfigComponent, ...canActivate(redirectUnauthorizedTo(['login'])) },
  { path: '**', redirectTo: '/config' },
];