Vue项目访问路由报Unexpected token o in JSON at position 1错误如何解决

错误原因 #

报错Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1的核心原因是：JSON.parse()方法被传入了非JSON字符串类型的参数，此处是直接传入了JavaScript对象。
当JSON.parse()接收对象参数时，会先自动将对象转为字符串"[object Object]"，解析到第1位（下标为1）的字符o时不符合JSON格式规则，就抛出该错误。
结合提供的代码，触发路径为：

• setUser mutation中直接将payload（用户对象）赋值给state.user，此时state.user为对象类型
• getUser getter中直接对state.user执行JSON.parse()，触发解析错误
• 额外潜在触发场景：页面刷新后vuex state重置，若未从localStorage读取数据赋值给state.user，state.user为null/undefined，执行JSON.parse()也会报错

解决方案 #

推荐优先选择方案3，性能最优、使用最方便：

方案1：给getter加类型判断和容错（临时快速修复） #

修改auth.js中的getUser getter：

const getters = {
  // 其他getter保持不变
  getUser: (state) => {
    // 已经是对象直接返回
    if (typeof state.user === 'object' && state.user !== null) {
      return state.user
    }
    // 字符串类型再解析，加try catch避免异常
    try {
      return state.user ? JSON.parse(state.user) : {}
    } catch (err) {
      console.warn('用户数据解析失败', err)
      return {}
    }
  }
}

方案2：state统一存储序列化字符串 #

修改setUser mutation，保证state.user和localStorage存储的都是JSON字符串：

const mutations = {
  // 其他mutation保持不变
  setUser: (state, payload) => {
    const userStr = JSON.stringify(payload)
    state.user = userStr
    localStorage.setItem("user", userStr)
  }
}
// 同时修改state初始化逻辑，从localStorage读取初始值
const state = {
  token: localStorage.getItem('auth_token') || '',
  user: localStorage.getItem('user') || ''
}

方案3：state统一存储对象（最优方案） #

移除getter中的解析逻辑，state直接存储对象，仅在和localStorage交互时做序列化/反序列化：

// 1. 修改state初始化逻辑
const state = {
  token: localStorage.getItem('auth_token') || '',
  // 初始化时从localStorage读取并解析
  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
}

// 2. 修改getter，直接返回对象
const getters = {
  // 其他getter保持不变
  getUser: (state) => state.user
}

// 3. mutation保持原有逻辑即可
const mutations = {
  setUser: (state, payload) => {
    state.user = payload
    localStorage.setItem("user", JSON.stringify(payload))
  }
}

该方案避免了每次调用getter都要执行JSON.parse的重复操作，性能更好，后续使用state.user也不需要额外处理类型。

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