React如何保持登录状态
使用本地存储（LocalStorage/SessionStorage）
将用户登录凭证（如Token）存储在浏览器的localStorage或sessionStorage中。localStorage数据持久化，关闭浏览器后仍存在；sessionStorage仅在当前会话有效。
// 登录成功后存储Token
localStorage.setItem('authToken', 'your_jwt_token_here');
// 应用初始化时检查Token
const token = localStorage.getItem('authToken');
if (token) {
// 存在Token则视为已登录
}使用Context API管理全局状态
创建全局的AuthContext，包裹整个应用，通过Context传递登录状态和用户信息。
import React, { createContext, useState, useContext } from 'react';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const login = (userData, token) => {
setUser(userData);
localStorage.setItem('authToken', token);
};
const logout = () => {
setUser(null);
localStorage.removeItem('authToken');
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);封装受保护路由
创建高阶组件或自定义Hook，拦截未登录用户访问受限路由。
import { Navigate } from 'react-router-dom';
import { useAuth } from './AuthContext';
const PrivateRoute = ({ children }) => {
const { user } = useAuth();
return user ? children : <Navigate to="/login" />;
};自动刷新Token机制
实现Token过期前的自动刷新，避免频繁要求用户重新登录。
// 在API请求拦截器中检查Token有效期
axios.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('authToken', newToken);
return axios(originalRequest);
}
return Promise.reject(error);
}
);服务端验证
每次关键请求都需向服务端验证Token有效性，防止本地存储被篡改。
const verifyToken = async () => {
try {
const response = await axios.get('/api/verify', {
headers: { Authorization: `Bearer ${localStorage.getItem('authToken')}` }
});
return response.data.valid;
} catch (error) {
return false;
}
};
