如何修复Vuex结合localStorage时的JSON解析错误

常见报错触发原因 #

• 项目基于Nuxt.js等SSR框架开发时，服务端运行环境不存在浏览器专属的localStorage全局对象，在state初始化阶段直接读取会抛出localStorage is not defined错误
• 原代码直接对localStorage.getItem('accessToken')的返回值执行JSON.parse，若本地存储中该键对应的值为空字符串、非JSON格式文本，会直接触发解析语法错误，且无法被后续的|| null兜底逻辑拦截
• 用户在浏览器隐私模式、或是手动禁用本地存储权限时，直接读写localStorage会触发安全权限错误，直接导致应用初始化失败白屏

对应修复操作 #

• 重写state中的令牌初始化逻辑，增加环境判断与异常捕获，适配多场景兼容：

  state: {
    accessToken: (() => {
      // 非浏览器环境直接返回空值
      if (typeof window === 'undefined' || !window.localStorage) return null
      try {
        const savedToken = localStorage.getItem('accessToken')
        // 存在有效存储值时再执行解析
        return savedToken ? JSON.parse(savedToken) : null
      } catch (err) {
        // 解析异常时返回空值，不阻断应用启动
        return null
      }
    })(),
    APIData: ''
  }
  

• 补全登出逻辑的本地存储清理：原有destroyToken mutation仅清空了Vuex内部的状态值，未同步删除localStorage中的旧令牌，会导致刷新页面时旧令牌被重新读取、登出失效。补充代码：

  destroyToken(state) {
    state.accessToken = null
    localStorage.removeItem('accessToken')
  }
  

• 所有涉及localStorage读写的操作统一包裹try-catch，避免用户在禁用本地存储的环境下访问时出现应用崩溃。

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