Question

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

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

我认为，实现此目标的方法是在router guard中实现调用我的平台令牌API的逻辑。

但是，当我这样做时，会出现此错误：

TypeError：source.lift不是函数

这是我的app-routing.module.ts，如果我将switchMap替换为map并删除async/await（不要让它返回promise或在回调内执行异步逻辑），那么一切正常很好-但是我不调用我的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 { }

为什么这行不通？有没有更好的方法来解决我的问题？

Answer 1

我让它工作了，但是当AngularFire auth防护被调用时，我完全误会了。海事组织，您不应大声疾呼，以使自己的警卫人员信服。

如果您需要等待诺言，那么这就是行之有效的警卫：

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

tap()不会引起任何副作用，并将原始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' },
];

重定向之前，AngularFire Auth将FireBase令牌交换为平台的令牌

1 个答案: