离子4 AngularFireAuthGuard问题-不像在github上描述的那样工作

Question

我使用的类型记录与angularjs 8连同离子4平台。阻止对路由的未经授权访问的angularfireguard https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md方法在本地主机上工作良好，当我将代码从“=>”更改为“=”时

const redirectUnauthorizedToLanding = () => redirectUnauthorizedTo(['auth/login']);
                     to the below code:

const redirectUnauthorizedToLanding = redirectUnauthorizedTo(['auth/login']);

但是，它无法阻止未经授权的用户访问授权人员使用的页面，当它部署在google Firebase云主机上而不是本地主机上时，就会发生这种情况。有人能澄清为什么会这样吗？，任何帮助都将是非常感谢的。

我的代码来自app-routing.module.ts:

import { AngularFireAuthGuard, loggedIn, redirectLoggedInTo } from '@angular/fire/auth-guard';
    import { redirectUnauthorizedTo, canActivate } from '@angular/fire/auth-guard';

    const redirectUnauthorizedToLanding = redirectUnauthorizedTo(['auth/login']);

    const routes: Routes = [
      { path: '', redirectTo: '/walkthrough', pathMatch: 'full' },
      { path: 'walkthrough', loadChildren: () => import('./walkthrough/walkthrough.module').then(m => m.WalkthroughPageModule) },
      { path: 'getting-started', loadChildren: () => import('./getting-started/getting-started.module').then(m => m.GettingStartedPageModule) },
      { path: 'auth/login', loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule) },
      { path: 'auth/signup', loadChildren: () => import('./signup/signup.module').then(m => m.SignupPageModule) },
      // tslint:disable-next-line:max-line-length
      { path: 'auth/forgot-password', loadChildren: () => import('./forgot-password/forgot-password.module').then(m => m.ForgotPasswordPageModule) },
      {
        path: 'app',
        loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
        ...canActivate(redirectUnauthorizedToLanding)
      },
      {
        path: 'contact-card',
        loadChildren: () => import('./contact-card/contact-card.module').then(m => m.ContactCardPageModule),
        ...canActivate(redirectUnauthorizedToLanding)
      },

我的信息输出：

   Ionic CLI                     : 5.4.10 (/home/xyz/.nvm/versions/node/v10.17.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.802.1
   @angular-devkit/schematics    : 8.2.1
   @angular/cli                  : 8.2.1
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.17.0 (/home/xyz/.nvm/versions/node/v10.17.0/bin/node)
   npm    : 6.11.3
   OS     : Linux 5.3

Answer 1

解决方案，我发现，即使在生产部署和开发版本也很好。

您所需要做的就是更改路由中的参数。

...canActivate(redirectUnauthorizedToLanding)

至以下各点：

canActivate: [AngularFireAuthGuard], data: {authGuardPipe: redirectUnauthorizedToLanding }

在路由中，将所有路由参数更改为上述给定的代码行，如下例所示：

{
    path: 'app',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule),
    canActivate: [AngularFireAuthGuard], data: {authGuardPipe: redirectUnauthorizedToLanding }
  },

这在部署在防火墙主机上时对我起了作用。