crazycharge-app/context/AuthProvider.tsx

import { ReactNode, createContext, useEffect, useState } from 'react';
import { useContext } from 'react';
import { router, useSegments } from 'expo-router';
import * as SecureStore from 'expo-secure-store';

import axios from 'axios';
import { EXPO_PUBLIC_API_URL } from '@env';
import { User } from '../types/user';

import { authenticationService } from '../service/authService';

type AuthProvider = {
    user: User | null;
    login: (username: string, password: string, isBinding: boolean) => Promise<boolean>;
    logout: () => void;
    setUser: React.Dispatch<React.SetStateAction<User | null>>;
};

function useProtectedRoute(user: User | null) {
    const segments = useSegments();
    // 添加状态跟踪根布局是否已挂载
    const [isLayoutMounted, setIsLayoutMounted] = useState(false);

    const isUserEmpty = (user: User | null): boolean => {
        return !user || Object.values(user).every((value) => value === undefined);
    };

    useEffect(() => {
        // 标记根布局已挂载
        setIsLayoutMounted(true);
    }, []);

    useEffect(() => {
        // 等待根布局挂载完成且路由段准备好
        if (!isLayoutMounted || !segments.length) return;

        const inAuthGroup = segments[0] === '(auth)';
        const inPublicGroup = segments[0] === '(public)';

        if (isUserEmpty(user) && !inPublicGroup) {
            router.replace('/login');
        } else if (!isUserEmpty(user) && inPublicGroup) {
            router.replace('/(auth)/(tabs)/(home)/mainPage');
        }
    }, [user, segments, isLayoutMounted]); // 添加 isLayoutMounted 依赖
}

export const AuthContext = createContext<AuthProvider>({
    user: null,
    login: async () => false,
    logout: () => {},
    setUser: () => {}
});

export function useAuth() {
    const context = useContext(AuthContext);
    if (!context) {
        throw new Error('useAuth must be used within a <AuthProvider />');
    }
    return context;
}

export default function AuthProvider({ children }: { children: ReactNode }) {
    const [user, setUser] = useState<User | null>(null);

    useEffect(() => {
        const checkToken = async () => {
            const token = await SecureStore.getItemAsync('accessToken');
            if (token) {
                const userInfo = await getUserFromAccessToken();
                if (userInfo) {
                    setUser(userInfo);
                }
            }
        };
        checkToken();
    }, []);

    const login = async (username: string, password: string, isBinding: boolean) => {
        try {
            const result = await authenticationService.phoneLogin(username, password, isBinding);
            if (result === 'login successful') {
                const token = await SecureStore.getItemAsync('accessToken');
                if (token) {
                    const userInfo = await getUserFromAccessToken();
                    if (userInfo) {
                        setUser(userInfo);
                        return 'login successful';
                    }
                }
                return 'login successful';
            } else {
                return result;
            }
        } catch (error) {
            console.error('Login error:', error);
            return error;
        }
    };

    const getUserFromAccessToken = async () => {
        SecureStore.getItemAsync('accessToken').then((aa) => {
            console.log('sssssss:', aa);
        });

        const token = await SecureStore.getItemAsync('accessToken');
        try {
            const res = await axios.get(`${EXPO_PUBLIC_API_URL}/clients/customer`, {
                headers: {
                    Authorization: `Bearer ${token}`
                }
            });

            const items = {
                address: res.data.address,
                birthday: res.data.birthday,
                gender: res.data.gender,
                email: res.data.email,
                nickname: res.data.nickname,
                phone: res.data.phone,
                car: res.data?.defaultCar?.license_plate
            };
            return items;
        } catch (error) {
            console.error('GetUser Error:', error);
        }
    };

    const logout = async () => {
        try {
            await authenticationService.logout();
            await SecureStore.deleteItemAsync('accessToken');
            setUser(null);
            router.replace('/login');
        } catch (error) {
            console.log('error during logout', error);
        }
    };
    // console.log('user', user);
    useProtectedRoute(user);

    return <AuthContext.Provider value={{ user, login, logout, setUser }}>{children}</AuthContext.Provider>;
}