Next.js使用js-cookie存userInfo触发JSON.parse错误如何解决？

问题根因 #

有两处代码错误共同导致了该报错：

• 异步axios请求未添加await关键字，拿到的是Promise对象而非接口返回的真实用户数据
• 存储对象类型数据到Cookie时未序列化为JSON字符串，Cookie自动将对象转为[object Object]格式的字符串，完全不符合JSON规范，导致JSON.parse抛出语法错误

修复步骤 #

1. 给axios请求添加await关键字 #

修改login.js中submitHandler内的请求代码：

// 修复前
const { data } = axios.post('/api/users/login', { email, password });
// 修复后
const { data } = await axios.post('/api/users/login', { email, password });

2. 存储userInfo前序列化JSON #

修改login.js中Cookie存储逻辑：

// 修复前
Cookies.set('userInfo', data);
// 修复后
Cookies.set('userInfo', JSON.stringify(data));

（可选）添加入口容错逻辑 #

为了避免之前存储的错误Cookie残留持续触发报错，可修改初始状态的userInfo读取逻辑增加异常捕获：

const initialState = {
  darkMode: Cookies.get('darkMode') === 'ON' ? true : false,
  cart: {
    cartItems: Cookies.get('cartItems')
      ? JSON.parse(Cookies.get('cartItems'))
      : [],
  },
  // 新增容错处理
  userInfo: (() => {
    try {
      const userInfoCookie = Cookies.get('userInfo')
      return userInfoCookie ? JSON.parse(userInfoCookie) : null
    } catch (err) {
      // 解析失败时清除错误Cookie
      Cookies.remove('userInfo')
      return null
    }
  })(),
};

修复完成后先清除浏览器当前站点的已有Cookie，再重新测试登录逻辑即可恢复正常。

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