如何在Apollo Client中结合Redux Store与LocalStorage存储用户登录数据以实现全局访问？

嘿，刚好我之前也做过类似的切换，给你一步步讲怎么实现：

1. 先处理LocalStorage存储 #

Apollo的useMutation的update回调是请求成功后触发的绝佳时机，你可以直接在这里把用户数据存到LocalStorage里——记得要把对象转成JSON字符串，不然存进去的是[object Object]：

update(_, { data: { loginUser } }) {
  // 存储到LocalStorage
  localStorage.setItem('user', JSON.stringify(loginUser));
  console.log(loginUser);
}

2. 同步到Redux Store #

假设你已经有了管理用户状态的Redux Slice（比如userSlice），里面定义了setUser这样的action来更新用户信息：

• 首先在组件里导入useDispatch和对应的action：

import { useDispatch } from '@reduxjs/toolkit';
import { setUser } from '../features/user/userSlice'; // 替换成你的slice实际路径

• 然后在组件内获取dispatch函数，再在update回调里分发action：

const dispatch = useDispatch();

const [addUser, { loading }] = useMutation(USER_LOGIN, {
  update(_, { data: { loginUser } }) {
    localStorage.setItem('user', JSON.stringify(loginUser));
    // 同步到Redux Store
    dispatch(setUser(loginUser));
    console.log(loginUser);
  },
  variables: {
    username: values.username,
    password: values.password,
  },
  onError(error) {
    setError(error.message);
  },
});

3. 页面刷新后恢复Redux状态 #

为了刷新页面后Redux里的用户信息不丢失，你可以在用户Slice的初始状态里从LocalStorage读取数据：

// userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action) => {
      state.user = action.payload;
    },
    // 可以再加个登出方法，同步清空LocalStorage和state
    logoutUser: (state) => {
      state.user = null;
      localStorage.removeItem('user');
    }
  }
});

export const { setUser, logoutUser } = userSlice.actions;
export default userSlice.reducer;

小提醒 #

• 敏感信息（比如密码）千万不要存在LocalStorage！你这里存用户名、邮箱是没问题的，但如果登录返回里有token，建议存在HttpOnly的Cookie里更安全。
• 如果你的mutation有onCompleted回调，也可以在那里做存储，但update回调更适合和Apollo Cache交互的场景，这里单纯存数据两个都能用。

内容的提问来源于stack exchange，提问作者עמית שוקרון