668caaa91f
## 核心功能 ### 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>
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { Tabs } from 'expo-router';
|
|
import React from 'react';
|
|
|
|
import { HapticTab } from '@/components/haptic-tab';
|
|
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
import { Colors } from '@/constants/theme';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
import { useAuth } from '@/hooks/use-auth';
|
|
|
|
export default function TabLayout() {
|
|
const colorScheme = useColorScheme();
|
|
const { isAuthenticated, isLoading } = useAuth();
|
|
|
|
if (isLoading) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
|
headerShown: false,
|
|
tabBarButton: HapticTab,
|
|
}}>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Home',
|
|
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="explore"
|
|
options={{
|
|
title: 'Explore',
|
|
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Profile',
|
|
tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|