Nuxt.js结合Django搭建鉴权系统时axios GET请求读取$auth报错

开发者阿泽

2026-9-28

错误原因

你遇到的报错核心是this指向异常，触发的原因有两个：

模板中的this是Vue框架自动绑定了当前组件实例的，所以可以正常读取$auth属性。但你写的两个axios请求直接放在了组件export default配置对象的外部，这部分代码会在组件模块被加载时就提前执行，此时没有组件实例上下文，严格模式下this默认指向undefined，自然读取不到$auth属性。
就算把请求放到export default内部，也不能直接写在配置根节点，必须放在组件的生命周期钩子（比如页面挂载触发的mounted钩子）或者方法内，才能拿到正确的组件实例this。

修复后完整代码

<template>
  <div>
     <!-- 模板内不需要写this，Vue自动绑定实例 -->
     {{ $auth.$storage.state.user.email }}
  </div>
</template>

<script>
import axios from 'axios';
export default {
  // 页面挂载完成后执行请求
  mounted() {
    // 此处this指向当前组件实例，可以正常读取$auth
    axios.get('/api/v1/is-success-or-not?email=' + this.$auth.$storage.state.user.email)
      .then((response) => {
        if(response.data === "True") {
          console.log("Player is success")
          // 组件内部直接通过this访问路由实例即可
          this.$router.push('/schedule')
        }
      })

    axios.get('failureornot?email=' + this.$auth.$storage.state.user.email)
      .then((response) => {
        if(response.data > 3) {
          console.log("failure")
          this.$router.push('/failure')
        }
      })
  }
}
</script>