@nuxtjs/auth-next模块报错：无法读取undefined的'Authorization'属性

排查步骤 #

1. 确认$auth实例是否正常注入 #

在userLogin方法的try块开头添加日志，验证this.$auth是否存在：

async userLogin() {
      try {
        console.log('$auth instance:', this.$auth) // 新增日志
        let response = await this.$auth.loginWith("local", {
          data: this.form,
        });
        // 其余代码保持不变
      } catch (err) {
        console.log(err);
      }
    },

如果输出为undefined，说明auth模块未正确初始化：

• 执行rm -rf node_modules .nuxt package-lock.json，重新安装依赖并重启Nuxt服务
• 确认nuxt.config.js中modules数组顺序正确（@nuxtjs/axios需在@nuxtjs/auth-next之前，当前配置已符合要求）

2. 补全axios基础配置 #

auth-next依赖axios处理请求，确保在nuxt.config.js中配置axios的baseURL：

axios: {
  baseURL: process.env.API_LINK
}

缺失baseURL可能导致auth模块的请求逻辑异常，进而引发headers读取错误。

3. 排查自定义axios拦截器冲突 #

若你写过axios请求拦截器，检查是否存在破坏headers结构的代码：

// 错误示例：直接清空或覆盖headers
this.$axios.interceptors.request.use(config => {
  // 禁止直接将config.headers设为undefined
  config.headers = config.headers || {}
  // 正确修改headers的方式
  return config
})

拦截器中错误修改headers会导致auth模块的_requestHasAuthorizationHeader方法无法读取Authorization属性。

4. 回退auth-next版本 #

如果是近期更新包后出现问题，回退到之前运行正常的版本：

npm install @nuxtjs/auth-next@<之前的稳定版本号>

可通过package-lock.json查询历史版本号，或尝试社区验证过的稳定版本如5.0.0-1648802546.c9880dc。

5. 验证token配置合理性 #

虽然错误指向Authorization头，但可排查token配置是否存在冲突：

• 确认后端登录响应中，token确实存在于data.token字段下（与你配置的token.property、endpoints.login.propertyName一致）
• 暂时将token.global设为false，测试是否能正常发起登录请求，排除全局token注入的影响

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