ionic 4 AngularFireAuthGuard问题-不能按照github上的描述工作

Question

我正在将打字稿与angularjs 8以及ionic 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 }
  },

这在部署Firebase托管时对我有用。