Vue.js中从URL提取Token并通过Axios发送POST请求遇阻

首先，你的代码里存在几个关键问题，不一定是 Token 提取的问题，我们一步步来排查修复：

1. 回调函数中的 this 指向错误 #

你在 then 和 catch 里使用了普通函数 function(res)，这里面的 this 并不指向 Vue 组件实例，导致你无法修改 confirmation 和 somethingWrong 这些 data 变量——这是 Vue 项目里非常常见的新手错误。

修复方法：把普通函数改成箭头函数，箭头函数会自动继承外部作用域的 this（也就是当前的 Vue 组件实例）：

export default {
  data() {
    return {
      confirmation: false,
      somethingWrong: false
    }
  },
  created() {
    // 先打印 Token 确认是否提取成功
    console.log('提取到的 Token:', this.$route.query.token);
    
    axios.post('/confirm', null, {
      params: { token: this.$route.query.token }
    })
    .then((res) => { // 改为箭头函数
      console.log(res)
      this.confirmation = true
    })
    .catch((error) => { // 改为箭头函数
      console.log(error)
      this.somethingWrong = true
    })
  }
}

另外，axios.post 本身已经默认是 POST 方法，所以配置里的 method: 'post' 完全可以删掉。

2. 确认 Token 是否真的提取失败 #

在 created 钩子开头添加那句 console.log，运行项目后打开浏览器控制台：

• 如果能正确输出 URL 里的 Token 值，说明提取没问题，问题出在接口请求或后端响应上；
• 如果输出 undefined，才是 Token 提取的问题，这时候要检查：
  • 路由模式：如果是 hash 模式（URL 带 #），要确保路由路径配置正确，this.$route.query.token 依然能正常读取参数；
  • 参数名拼写：确认 URL 里的参数确实是 token，有没有大小写或拼写错误（比如写成 Token 或 tken）。

3. 优化 axios 请求的参数传递方式 #

如果后端接口期望 Token 放在请求体里（而不是 URL 参数），你需要把 Token 移到 axios.post 的第二个参数位置：

axios.post('/confirm', { token: this.$route.query.token })
  .then(...)
  .catch(...)

具体怎么传要根据后端接口的要求来调整，如果后端是从 URL 参数里取 Token，那你原来的 params 写法是正确的。

按上面的步骤排查修复，应该就能解决你的问题了~

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