angular / angular/angularfire

[Auth Guard - BUG] canActivate auth guard causes blank screen after cache clear with multiple tabs opens.

未关闭
#3,691 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
7.8k
派生
2.2k
平均合并
22 小时 28 分钟
30 天内合并 PR
6

描述

If using the canActivate auth guard (with spread syntax), If you have more than 1 tab open of the same app, and then you clear the cache by using the browser in one of the tabs, and try to refresh, it causes a blank screen, which resolves after you close the other open tab.

steps to reproduce:

versions:
"@angular/common": "^20.3.0",
"@angular/compiler": "^20.3.0",
"@angular/core": "^20.3.0",
"@angular/fire": "^20.0.1",
"@angular/forms": "^20.3.0",
"@angular/platform-browser": "^20.3.0",
"@angular/router": "^20.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"

steps to reproduce:
1. Create new project
2. install angular fire
3. setup authentication and firebase project
4. utilize the ...canActivate auth guard like below.
5. open two tabs of the same page.
6. in one of them, clear the cache (by using the button close to the url in chrome for ex)
7. refresh
8. blank screen.
9. verify that if you close the second tab, then the first one loads correctly.

```TS
const redirectTeste1 = () => redirectLoggedInTo('test2');
const redirectTeste2 = () => redirectUnauthorizedTo('teste1');

export const routes: Routes = [
{ path: '', redirectTo: 'teste1', pathMatch: 'full' },

{
path: 'teste1',
component: Test1,
...canActivate(redirectTeste1),
},

{
path: 'teste2',
component: Test2,
...canActivate(redirectTeste2),
},
];
```

lmk if this is somehow a user error, but with such a barebones configuration I think is a legitimate bug.

贡献指南

打开贡献指南

调研方向

从 issue 中描述的最小 AngularFire 身份验证设置开始,使用带有 redirectLoggedInTo 和 redirectUnauthorizedTo 的 canActivate guard。使用两个标签页复现该行为,在其中一个标签页中清除缓存并刷新它。完成标准是:刷新后的标签页能够正常加载,而不是显示空白屏幕,同时另一个标签页保持打开状态。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, firebase, typescript
领域
authentication, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。