shinya
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
/* eslint-disable no-console */
|
|
|
|
'use client';
|
|
|
|
import { LogOut } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
|
|
export const LogoutButton: React.FC = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
if (loading) return;
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
// 调用注销API来清除cookie
|
|
await fetch('/api/logout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
});
|
|
} catch (error) {
|
|
console.error('注销请求失败:', error);
|
|
}
|
|
|
|
// 清除localStorage中的认证信息（向后兼容）
|
|
if (typeof window !== 'undefined') {
|
|
localStorage.removeItem('password');
|
|
localStorage.removeItem('username');
|
|
}
|
|
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleLogout}
|
|
className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
|
|
aria-label='Logout'
|
|
>
|
|
<LogOut className='w-full h-full' />
|
|
</button>
|
|
);
|
|
};
|