61 lines
2.3 KiB
Markdown
61 lines
2.3 KiB
Markdown
# Favorites 页面 MobileGuard 弹窗警告修复
|
||
|
||
## Summary
|
||
修复 `/favorites` 路由在桌面端未登录时弹出的 MobileGuard 登录弹窗警告问题。将 Favorites 页面从 MobileGuard 切换到 AuthGuard，使用与其他需要登录的页面一致的认证模式。
|
||
|
||
## Current State Analysis
|
||
|
||
### 问题描述
|
||
- `/favorites` 路由目前使用 `<MobileGuard>` 包裹（App.tsx 第134行）
|
||
- MobileGuard 组件在桌面端检测到未登录用户时，会显示一个登录提示 Modal 弹窗（`showLoginPrompt` 状态控制）
|
||
- 这个弹窗是强制的（`closable`, `maskClosable`），用户需要手动关闭
|
||
- 这与其它需要登录的页面（如 `/bug` 使用 AuthGuard）的认证模式不一致
|
||
|
||
### 当前行为
|
||
1. 用户访问 `/favorites` 且未登录
|
||
2. MobileGuard 检测到 `!isLogin`，设置 `showLoginPrompt = true`
|
||
3. 显示登录提示 Modal，遮挡页面内容
|
||
4. 用户必须点击"去登录"或"稍后再说"才能继续
|
||
|
||
### 期望行为
|
||
1. 用户访问 `/favorites` 且未登录
|
||
2. 显示全局登录弹窗（通过 LoginModalContext）
|
||
3. 页面内容为空（AuthGuard 返回 null）
|
||
4. 登录后自动显示收藏夹内容
|
||
|
||
## Proposed Changes
|
||
|
||
### 修改文件: `src/App.tsx`
|
||
|
||
**变更内容：**
|
||
将 `/favorites` 路由从 `<MobileGuard>` 改为 `<AuthGuard>`
|
||
|
||
**修改前：**
|
||
```tsx
|
||
<Route path="/favorites" element={<MobileGuard><Favorites /></MobileGuard>} />
|
||
```
|
||
|
||
**修改后：**
|
||
```tsx
|
||
<Route path="/favorites" element={<AuthGuard><Favorites /></AuthGuard>} />
|
||
```
|
||
|
||
**原因：**
|
||
- AuthGuard 使用全局的 `LoginModalContext` 显示登录弹窗，行为更一致
|
||
- AuthGuard 在未登录时返回 `null`，不会渲染子组件，避免不必要的 API 请求
|
||
- 与 `/bug` 等页面的认证模式保持一致
|
||
|
||
## Assumptions & Decisions
|
||
|
||
1. **假设：** 用户希望 Favorites 页面在桌面端不再显示 MobileGuard 的登录弹窗
|
||
2. **决策：** 使用 AuthGuard 替代 MobileGuard，保持认证逻辑的一致性
|
||
3. **不修改范围：** 仅修改 `/favorites` 路由，不影响其他使用 MobileGuard 的路由
|
||
|
||
## Verification
|
||
|
||
1. 启动开发服务器 `npm run dev`
|
||
2. 确保未登录状态
|
||
3. 访问 `/favorites`
|
||
4. 验证：不再显示 MobileGuard 的登录弹窗，而是显示全局登录提示
|
||
5. 登录后验证：收藏夹内容正常加载显示
|