38 lines
1011 B
TypeScript
38 lines
1011 B
TypeScript
import { useFetcher } from '@remix-run/react';
|
|
import { useEffect, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
// 定义错误响应的类型
|
|
interface AuthErrorResponse {
|
|
errorMessage?: string;
|
|
}
|
|
|
|
/**
|
|
* 认证错误提示组件
|
|
*
|
|
* 这个组件检测认证过程中的错误，并使用 toast 显示错误消息
|
|
*/
|
|
export function AuthErrorToast() {
|
|
// 使用 fetcher 从服务器获取错误信息
|
|
const fetcher = useFetcher<AuthErrorResponse>();
|
|
const [hasChecked, setHasChecked] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// 只在组件首次加载时检查一次错误
|
|
if (!hasChecked) {
|
|
fetcher.load('/api/auth/check-error');
|
|
setHasChecked(true);
|
|
}
|
|
}, [fetcher, hasChecked]);
|
|
|
|
useEffect(() => {
|
|
// 当 fetcher 获取到数据时，如果有错误信息则显示
|
|
if (fetcher.data?.errorMessage) {
|
|
toast.error(fetcher.data.errorMessage);
|
|
}
|
|
}, [fetcher.data]);
|
|
|
|
// 这是一个无形的组件，不渲染任何内容
|
|
return null;
|
|
}
|