react实现登录失效
React 实现登录失效处理
在 React 应用中处理登录失效通常涉及以下几个关键步骤：
检查登录状态
通过检查本地存储的 token 或调用 API 验证当前登录状态是否有效。可以使用 localStorage 或 sessionStorage 存储 token。
const checkAuth = () => {
const token = localStorage.getItem('token');
if (!token) {
return false;
}
// 可选：调用 API 验证 token 有效性
return true;
};拦截请求处理失效
使用 Axios 拦截器在请求或响应时检查登录状态，如果 token 失效则跳转到登录页。
import axios from 'axios';
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
}
);路由守卫保护页面
通过 React Router 的 ProtectedRoute 组件保护需要登录的页面，未登录时重定向到登录页。
import { Route, Redirect } from 'react-router-dom';
const ProtectedRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
checkAuth() ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
);定时检查登录状态
使用 setInterval 定时检查 token 是否过期，提前通知用户或自动刷新 token。
useEffect(() => {
const interval = setInterval(() => {
if (!checkAuth()) {
alert('登录已过期，请重新登录');
window.location.href = '/login';
}
}, 300000); // 每 5 分钟检查一次
return () => clearInterval(interval);
}, []);自动刷新 token
在 token 即将过期时自动刷新，避免频繁重新登录。
const refreshToken = async () => {
try {
const response = await axios.post('/refresh-token', {
refreshToken: localStorage.getItem('refreshToken'),
});
localStorage.setItem('token', response.data.token);
} catch (error) {
window.location.href = '/login';
}
};全局状态管理
使用 Context API 或 Redux 管理登录状态，确保所有组件能响应登录状态变化。
const AuthContext = createContext();
const AuthProvider = ({ children }) => {
const [isAuthenticated, setIsAuthenticated] = useState(checkAuth());
return (
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
{children}
</AuthContext.Provider>
);
};退出登录处理
提供明确的退出登录功能，清除所有相关数据。
const handleLogout = () => {
localStorage.removeItem('token');
localStorage.removeItem('refreshToken');
window.location.href = '/login';
};通过以上方法可以全面处理 React 应用中的登录失效问题，确保用户体验和系统安全性。
