0

我为我的网络应用程序创建了一个 Authguard，并分配了几个路由，如主页、登录、注册等。

预期行为：

  1. 主页 - 目的是在用户未登录时显示登录页面
  2. 登录，注册，忘记密码等 - 如果用户已经登录，则目的是将用户重定向到主页（如果用户在地址栏中键入 url，则避免将登录页面显示给已登录的用户)

实际行为：

  1. 如果没有登录的用户访问主页，他将被重定向到登录页面，但该页面不显示。

  2. 如果用户通过 URL 访问登录页面，则该页面不会再次显示。[无论用户是否登录]

  3. 如果我删除登录页面的 auth 保护，加载主页会将用户重定向到登录页面，并且页面会正确显示。

我的 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 分配给登录页面。但我无法确定导致问题的原因。你们中的任何人都可以指出我正确的方向吗？

4

0 回答 0