登录后的AngularFireAuthGuard redirectUrl
登录后的AngularFireAuthGuard redirectUrl
提问于 2020-10-21 04:24:59
我使用firebase和AngularFireAuthGuard来保护特定的路由，这样只有经过身份验证的用户才能访问它们。特别是，我的MainComponent和MgmtComponent只能被身份验证的用户访问。
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。所以我想/期待的是：
用户转到/mgmt
- as，用户未经过身份验证，他被自动重定向到
/login
- user身份验证(例如通过google或Facebook OAuth)
- 用户被自动重定向回最初请求的页面(
/mgmt)
步骤1-3工作良好，但步骤4未完成。
回答 2
Stack Overflow用户
发布于 2020-12-23 22:29:44
既然特性请求已经存在，您就可以使用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);
};Stack Overflow用户
发布于 2020-10-21 17:21:41
这是一个开放的特性请求，angularfire团队正在处理它：https://github.com/angular/angularfire/pull/2448
与此同时，我找到了一个解决办法:在应用程序路由-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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64456664
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号