我为我的/sign-in
和/verify-email
路由创建了一个auth guard,只允许未登录或未验证电子邮件的用户访问:
export const signInGuard: CanActivateFn = (activatedRouteSnapshot: ActivatedRouteSnapshot): Promise<UrlTree | boolean> => {
const router = inject(Router);
const authenticationService = inject(AuthenticationService);
const routeToResolve = activatedRouteSnapshot.url[0].path;
console.log(routeToResolve)
return firstValueFrom(authenticationService.onAuthStateChanged$)
.then(user => {
if (routeToResolve === 'verify-email') {
if (!user) {
return router.parseUrl('/sign-in'); // ### the issue is here ###
} else if (user.emailVerified) {
return router.parseUrl('/');
} else {
return true;
}
} else {
if (user) {
return router.parseUrl('/');
} else {
return true;
}
}
});
};
记录routeToResolve
变量时控制台的日志:
sign-in.guard.ts:12 verify-email
user.service.ts:21 [User Service]
user.service.ts:22 null
sign-in.guard.ts:12 sign-in
除了当用户为null并且他们试图访问/verify-email
时,该防护在所有情况下都能正常工作。在本例中,我的预期行为是将用户重定向到/sign-in
。而不是这种行为,用户停留在相同的路线(/verify-email
)与空白的白色屏幕。
当我用return router.parseUrl('/')
替换return router.parseUrl('/sign-in')
时,用户被正确地重定向,这告诉我逻辑被正确地执行了。但是当我使用return router.parseUrl('/sign-in')
时,它不起作用。
我也试着把这行代码替换为:
return router.navigateByUrl('/sign-in').then(() => false);
这仍然导致相同的bug行为。
1条答案
按热度按时间yhxst69z1#
白色页通常意味着由于一些可观察的不发射/完成而使防护挂起。从日志看,似乎你从“验证电子邮件”重定向到“登录”路由,然后这个警卫再次检查,但不让你通过。有没有可能authenticationService.onAuthStateChanged$第二次没有发出任何值,而您只是挂起了它?
如果没有,也许有一些其他的警卫在'签到'路线,不工作得很好?
你可以在里面添加一个控制台日志。然后阻塞,它会给予你更多关于发生了什么的信息