## 核心功能 ### 1. 全局认证架构 - 新增 AuthProvider:全局认证上下文,管理登录状态和Modal - 新增 useAuthGuard Hook:提供 requireAuth 认证拦截功能 - 新增 AuthGuard 组件:包装需要认证的组件 - 新增 AuthPrompt 组件:多种样式的登录引导组件 ### 2. 登录体验优化 - LoginModal 已优化为底部抽屉式设计 - 登录成功后自动关闭Modal并恢复用户操作 - 支持队列机制,多个认证检查依次执行 ### 3. 页面架构调整 - 根布局集成 AuthProvider - 移除 Tabs 布局的重定向逻辑 - Explore 页面添加认证保护,显示登录提示 ### 4. API安全增强 - 新增 TokenManager:完整的Token生命周期管理 - 新增 SecureClient:安全API客户端,自动处理认证 - 更新 API 客户端:支持认证头和自动Token刷新 ### 5. 文档完善 - AUTH_SYSTEM.md:完整的认证系统使用指南 - AUTH_UPGRADE_SUMMARY.md:升级总结文档 ## 技术亮点 ✅ TypeScript 完整支持,编译时类型检查 ✅ React 最佳实践,合理使用 Hooks 和 Context ✅ 优雅的错误处理,友好的用户提示 ✅ 流畅的动画效果,原生级用户体验 ## 核心优势 - 流畅:无需页面跳转,Modal即用即走 - 智能:自动检测登录需求,无需手动判断 - 安全:完整Token管理和自动刷新机制 - 灵活:多种认证组件满足不同场景 - 易用:详细文档和示例,快速上手 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
29 lines
931 B
TypeScript
29 lines
931 B
TypeScript
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import 'react-native-reanimated';
|
|
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
import { AuthProvider } from '@/components/auth/auth-provider';
|
|
|
|
export const unstable_settings = {
|
|
anchor: '(tabs)',
|
|
};
|
|
|
|
export default function RootLayout() {
|
|
const colorScheme = useColorScheme();
|
|
|
|
return (
|
|
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
|
<AuthProvider>
|
|
<Stack>
|
|
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
|
|
</Stack>
|
|
<StatusBar style="auto" />
|
|
</AuthProvider>
|
|
</ThemeProvider>
|
|
);
|
|
}
|