react如何感知token变化了
监听Token变化的常见方法
在React中，可以通过以下几种方式感知Token的变化：
使用Context API 创建一个AuthContext来管理Token状态，并通过Provider将Token传递给子组件。子组件通过useContext钩子监听Token变化。
const AuthContext = createContext();
function AuthProvider({ children }) {
const [token, setToken] = useState(localStorage.getItem('token'));
const value = {
token,
setToken: (newToken) => {
localStorage.setItem('token', newToken);
setToken(newToken);
}
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
function ChildComponent() {
const { token } = useContext(AuthContext);
// token变化时会触发重新渲染
}使用状态管理库 在Redux或MobX等状态管理库中存储Token，组件通过connect或useSelector订阅Token状态。
// Redux示例
const mapStateToProps = (state) => ({
token: state.auth.token
});
export default connect(mapStateToProps)(Component);使用自定义事件 通过window.dispatchEvent和window.addEventListener实现全局事件监听。
// 设置Token时触发事件
const setToken = (newToken) => {
localStorage.setItem('token', newToken);
window.dispatchEvent(new Event('tokenChange'));
};
// 组件中监听
useEffect(() => {
const handleTokenChange = () => {
const newToken = localStorage.getItem('token');
// 处理Token变化
};
window.addEventListener('tokenChange', handleTokenChange);
return () => window.removeEventListener('tokenChange', handleTokenChange);
}, []);存储Token的最佳实践
将Token存储在内存中比localStorage更安全，但页面刷新后会丢失。可以考虑以下方案：
- 内存存储 + localStorage备份
- 使用httpOnly的Cookie存储
- 使用sessionStorage替代localStorage
Token过期处理
通过拦截器或高阶组件检查Token有效期：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
// Token过期处理逻辑
}
return Promise.reject(error);
}
);性能优化建议
对于频繁使用Token的组件，考虑使用React.memo避免不必要的重新渲染：
const MemoizedComponent = React.memo(function Component({ token }) {
// 组件实现
});通过合理选择上述方法，可以有效地在React应用中感知和管理Token的变化。
