Question

我已经为我的Web应用程序创建了Authguard，并分配了一些路由，例如“首页”，“登录”，“注册”等。

预期行为：

主页-如果用户未登录，则打算显示登录页面
登录，注册，忘记密码等-旨在将用户重定向到主页（如果该用户已经登录）（避免在用户输入url的情况下向登录用户显示登录页面）地址栏）

实际行为：

如果尚未登录的用户访问主页，则该用户将被重定向到“登录”页面，但不会显示该页面。
如果用户通过URL访问登录页面，则不会再次显示该页面。 [无论用户是否登录]
如果我删除了登录页面的身份验证保护，则加载主页会将用户重定向到登录页面，并且该页面会正确显示。

我的AuthGuard代码

 @Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private afAuth: AngularFireAuth,
    private router: Router,
    private storageService: LocalStorageService
  ) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {

    return this.afAuth.authState.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        const url = route.url.toString();
        if (url === ROUTE_SIGNIN || url === ROUTE_SIGNUP || url.includes(ROUTE_FORGOT_PASSWORD) ) {
          if (loggedIn) {
            this.router.navigate([ROUTE_HOME]);
            return of(false);
          }
        } else if (url === ROUTE_HOME) {
          const skipped = this.storageService.getValue(KEY_SIGNIN_SKIPPED);
          if (!loggedIn && !skipped) {
            this.router.navigate([ROUTE_SIGNIN]);
            return of(false);
          }
        }
        return of(true);
      })
    );
  }
}

编辑：路线：

  const routes: Routes = [
  {
    path: '',
    redirectTo: ROUTE_HOME,
    pathMatch: 'full'
  },
  { path: ROUTE_HOME, loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuard] },
  { path: ROUTE_NAV_LIST, loadChildren: './pages/list/list.module#ListPageModule', canActivate: [AuthGuard]  },
  { path: ROUTE_SIGNIN, loadChildren: './pages/signin/signin.module#SigninPageModule', canActivate: [AuthGuard] },
  { path: ROUTE_SIGNUP, loadChildren: './pages/signup/signup.module#SignupPageModule', canActivate: [AuthGuard]  },
  { path: ROUTE_FORGOT_PASSWORD, loadChildren: './pages/forgot-password/forgot-password.module#ForgotPasswordPageModule'
    , canActivate: [AuthGuard]  },
  { path: ROUTE_PHONE_VERIFICATION, loadChildren: './pages/phone-verification/phone-verification.module#PhoneVerificationPageModule'
    , canActivate: [AuthGuard]  },

];

我可以理解，这里的问题是将Authguard分配给登录页面。但我无法确定是什么引起了问题。你们中的任何人都能指出我正确的方向吗？

Ionic4 Angular AuthGuard适用于主页而非登录页面

0 个答案: