1

我使用 firebase 和 AngularFireAuthGuard 来保护特定的路由，这样只有经过身份验证的用户才能访问它们。特别是，我的 MainComponent 和 MgmtComponent 应该只能由 AUTHENTICATED 用户访问。

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/login']);

const routes: Routes = [
  { path: 'teams/:teamId/sessions/:sessionId',
    component: MainComponent,
    canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin }
  },
  { path: 'mgmt',
    component: MgmtComponent,
    canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin }
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

我的问题是，成功登录后，用户没有被重定向回最初请求的 URL。所以我想要/期望的是：

  1. 用户去/mgmt
  2. 由于用户未通过身份验证，他会自动重定向到/login
  3. 用户身份验证（例如通过 google 或 Facebook OAuth）
  4. 用户被自动重定向回最初请求的页面 ( /mgmt)

步骤 1-3 工作正常，但缺少步骤 4。

4

2 回答 2

2

现在功能请求已经出现，您可以使用 auth 保护来执行此操作。但是，文档不清楚，所以这就是我的做法。

/** add redirect URL to login */
const redirectUnauthorizedToLogin = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  return redirectUnauthorizedTo(`/login?redirectTo=${state.url}`);
};

/** Uses the redirectTo query parameter if available to redirect logged in users, or defaults to '/' */
const redirectLoggedInToPreviousPage = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  let redirectUrl = '/';
  try {
    const redirectToUrl = new URL(state.url, location.origin);
    const params = new URLSearchParams(redirectToUrl.search);
    redirectUrl = params.get('redirectTo') || '/';
  } catch (err) {
    // invalid URL
  }
  return redirectLoggedInTo(redirectUrl);
};
于 2020-12-23T22:29:44.157 回答
1

这是一个开放的功能请求，angularfire 团队正在处理它：https ://github.com/angular/angularfire/pull/2448

同时我发现了这个解决方法：在app-routing-module.ts而不是

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/login']);

我使用以下方法将 url 存储在 sessionStorage 中：

const redirectUnauthorizedToLogin = (route: ActivatedRouteSnapshot) => {
  const path = route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/');

  return pipe(
    loggedIn,
    tap((isLoggedIn) => {
      if (!isLoggedIn) {
        console.log('Saving afterLogin path', path);
        sessionStorage.setItem('afterLogin', path);
      }
    }),
    map(loggedIn => loggedIn || ['/login'])
  );
};

在LoginComponent 中，我从会话存储中读取值以进行重定向：

sessionStorage.getItem('afterLogin');
this.router.navigateByUrl(redirectUrl);
于 2020-10-21T17:21:41.357 回答