React+Redux项目中Cookie登录状态无法自动更新求助

在React+Redux应用中，希望Cookie存在token时自动将“Sign in”按钮切换为“Log Out”，但当前isLogged状态仅在手动刷新页面时才会变化，无法自动更新。

问题原因 #

1. 组件初始化时仅读取一次Cookie中的token，后续Cookie变化时该变量不会自动更新，导致useEffect依赖未触发，无法更新isLogged状态。
2. 登录成功后仅设置了Cookie，但未通知头部组件更新状态；登出时虽修改了Cookie和本地状态，但跨组件状态未同步。

解决方案 #

方案一：用Redux全局管理登录状态（推荐）

将登录状态放到Redux全局状态中，跨组件共享，状态变化时自动触发组件重渲染。

1. 创建Auth Slice

import { createSlice } from '@reduxjs/toolkit';
import Cookies from 'js-cookie';

const initialState = {
  isLogged: !!Cookies.get('token'),
  token: Cookies.get('token') || null
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    loginSuccess: (state, action) => {
      state.isLogged = true;
      state.token = action.payload;
    },
    logoutSuccess: (state) => {
      state.isLogged = false;
      state.token = null;
    }
  }
});

export const { loginSuccess, logoutSuccess } = authSlice.actions;
export default authSlice.reducer;

2. 在Store中注册Auth Slice

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';
import authReducer from './authSlice';

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    auth: authReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware)
});

3. 登录页面更新Redux状态

import { useDispatch } from 'react-redux';
import { loginSuccess } from '../features/auth/authSlice';
import Cookies from 'js-cookie';

// ...

const dispatch = useDispatch();

const handleSubmit = (e) => {
  e.preventDefault();
  getToken({ email, password })
    .unwrap()
    .then((data) => {
      const token = data.body.token;
      Cookies.set('token', token, { expires: 1 });
      dispatch(loginSuccess(token)); // 同步更新Redux状态
      navigate('/users');
      setErrorMessage('');
    })
    .catch((error) => {
      setShakingAnimation(true);
      setTimeout(() => setShakingAnimation(false), 500);
      setErrorMessage(error.data.message);
    });
};

4. 头部组件从Redux获取状态

import { useSelector, useDispatch } from 'react-redux';
import { logoutSuccess } from '../features/auth/authSlice';
import Cookies from 'js-cookie';

// ...

const isLogged = useSelector(state => state.auth.isLogged);
const dispatch = useDispatch();

const handleLogout = () => {
  Cookies.remove('token');
  dispatch(logoutSuccess()); // 同步更新Redux状态
  console.log('logout');
};

方案二：使用react-cookie监听Cookie变化

借助react-cookie库自动监听Cookie变化，实现状态自动更新。

1. 安装依赖

npm install react-cookie

2. 全局包裹CookieProvider

// App.jsx
import { CookieProvider } from 'react-cookie';

function App() {
  return (
    <CookieProvider>
      {/* 你的应用组件/路由 */}
    </CookieProvider>
  );
}

3. 头部组件使用useCookie

import { useCookie } from 'react-cookie';
import { useState, useEffect } from 'react';

// ...

const [token] = useCookie('token');
const [isLogged, setIsLogged] = useState(!!token);

useEffect(() => {
  setIsLogged(!!token);
}, [token]); // Cookie变化时自动触发

const handleLogout = () => {
  const [, setToken] = useCookie('token');
  setToken(null); // 移除Cookie，自动触发状态更新
  setIsLogged(false);
  console.log('logout');
};

4. 登录页面设置Cookie

import { useCookie } from 'react-cookie';

// ...

const [, setToken] = useCookie('token');

const handleSubmit = (e) => {
  e.preventDefault();
  getToken({ email, password })
    .unwrap()
    .then((data) => {
      const tokenValue = data.body.token;
      setToken(tokenValue, { expires: 1 }); // 自动触发状态更新
      navigate('/users');
      setErrorMessage('');
    })
    .catch((error) => {
      // 错误处理逻辑
    });
};

说明 #

• 方案一适合需要跨多个组件共享登录状态的场景，Redux能更清晰地管理全局状态。
• 方案二更轻量，适合小型应用或仅需监听Cookie变化的场景。

内容的提问来源于stack exchange，提问作者mdnc