react实现登录注销
React 登录注销实现方案
使用 Context 管理全局状态
创建 AuthContext 存储用户认证状态，通过 Provider 向子组件传递登录状态和方法。典型实现包含 user 状态和 login/logout 方法：
const AuthContext = createContext();
function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const login = (userData) => {
setUser(userData);
localStorage.setItem('token', userData.token);
};
const logout = () => {
setUser(null);
localStorage.removeItem('token');
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
}路由保护与重定向
结合 React Router 实现受保护路由，未登录用户访问受限路由时自动跳转登录页：
function PrivateRoute({ children }) {
const { user } = useContext(AuthContext);
return user ? children : <Navigate to="/login" />;
}
// 使用示例
<Routes>
<Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
</Routes>表单处理与 API 集成
登录表单需处理提交事件并与后端 API 交互，成功后更新认证状态：
function LoginForm() {
const { login } = useContext(AuthContext);
const [formData, setFormData] = useState({ email: '', password: '' });
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('/api/login', formData);
login(response.data); // 更新全局状态
} catch (error) {
alert('登录失败');
}
};
return (
<form onSubmit={handleSubmit}>
<input type="email" onChange={(e) => setFormData({...formData, email: e.target.value})} />
<input type="password" onChange={(e) => setFormData({...formData, password: e.target.value})} />
<button type="submit">登录</button>
</form>
);
}持久化登录状态
应用初始化时检查本地存储的 token，实现自动登录：
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
axios.get('/api/me', { headers: { Authorization: token } })
.then(res => setUser(res.data))
.catch(() => localStorage.removeItem('token'));
}
}, []);
return (
<AuthProvider value={{ user, login, logout }}>
{/* 路由配置 */}
</AuthProvider>
);
}注销功能实现
注销按钮触发清除本地存储和全局状态：
function LogoutButton() {
const { logout } = useContext(AuthContext);
return <button onClick={logout}>退出登录</button>;
}安全增强措施
- 使用 HTTPS 传输敏感数据
- 实现 CSRF 保护机制
- 对密码字段进行前端加密
- 设置 token 过期时间
- 敏感操作需二次验证
