react实现logout
React 实现用户登出功能
在 React 应用中实现用户登出（logout）功能通常涉及清除用户认证状态、移除本地存储的令牌以及重定向到登录页面。以下是几种常见实现方式：
使用 React Router 和 Context API
创建一个认证上下文管理用户状态，在登出时清除令牌并更新状态：
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AuthContext } from './AuthContext';
function LogoutButton() {
const { setAuth } = useContext(AuthContext);
const navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem('token');
setAuth(null);
navigate('/login');
};
return <button onClick={handleLogout}>Logout</button>;
}使用 Redux 管理状态
当使用 Redux 管理认证状态时，可以创建登出 action：
import { useDispatch } from 'react-redux';
import { logout } from './authSlice';
function LogoutButton() {
const dispatch = useDispatch();
const handleLogout = () => {
dispatch(logout());
};
return <button onClick={handleLogout}>Logout</button>;
}对应的 Redux slice 可能包含：
const authSlice = createSlice({
name: 'auth',
initialState: { user: null },
reducers: {
logout: (state) => {
localStorage.removeItem('token');
state.user = null;
}
}
});处理 JWT 令牌
如果应用使用 JWT 进行认证，登出时需要清除存储的令牌：
const logout = () => {
// 清除本地存储
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
// 清除 cookie
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
// 重定向到登录页
window.location.href = '/login';
};与后端 API 交互
某些应用可能需要调用后端 API 使令牌失效：
const handleLogout = async () => {
try {
await axios.post('/api/logout');
localStorage.removeItem('token');
window.location.reload();
} catch (error) {
console.error('Logout failed:', error);
}
};使用自定义 Hook
可以创建自定义 hook 封装登出逻辑：
function useLogout() {
const navigate = useNavigate();
const logout = () => {
localStorage.clear();
sessionStorage.clear();
navigate('/login', { replace: true });
};
return logout;
}
// 使用示例
function UserProfile() {
const logout = useLogout();
return <button onClick={logout}>Sign Out</button>;
}清除所有相关数据
完整登出流程应清除所有用户相关数据：
const performLogout = () => {
// 清除存储
localStorage.clear();
sessionStorage.clear();
// 清除应用状态
reduxStore.dispatch(resetAllState());
// 清除缓存
if (window.caches) {
caches.keys().then(names => {
names.forEach(name => caches.delete(name));
});
}
// 重定向
window.location.href = '/';
};实现登出功能时需考虑应用的具体架构和认证方式，确保清除所有用户敏感数据并正确更新 UI 状态。对于单页应用，通常需要强制刷新页面以确保完全清除内存中的状态。
