Vue项目打开页面时如何触发后端请求获取JWT token？

报错根因 #

1. router/index.js中的路由守卫钩子不属于Vue实例上下文，this 不指向Vue实例，因此this.$axios必然无法获取到值，触发undefined报错。
2. 原代码存在严重的异步逻辑漏洞：axios请求是异步执行的，你没有等待请求返回就直接执行jwt解析、调用next()，就算请求成功，后续逻辑拿到的还是旧的null值，也会触发报错。你之前直接导入axios不生效，大概率也是异步逻辑没处理、或者请求URL缺少协议导致的。

修复方案（路由守卫实现） #

首先在router/index.js顶部直接引入axios实例，不要通过this调用：

// 有自定义封装的axios就导入自己封装的实例，没有就直接导入原生axios
import axios from 'axios'

修正后的路由守卫代码如下，用async/await处理异步逻辑：

router.beforeEach(async (to, from, next) => {
  if (to.meta.authRequired) {    
    let jwt = localStorage.getItem('jwt');
    // 可额外补充jwt过期校验逻辑，避免使用过期token
    if (!jwt) {
      try {
        // 注意URL必须加http/https协议，否则会被识别为相对路径导致请求404
        const res = await axios.get(`http://localhost:8081/api/users/jwtWithoutLogin`)
        jwt = res.data.jwt
        localStorage.setItem('jwt', jwt)
      } catch (e) {
        // 请求失败的降级逻辑，比如跳转到错误页
        return next('/error')
      }
    }
    // 等jwt确认存在后再解析
    const payload = JSON.parse(atob(jwt.split('.')[1]));
    const username = payload.username
    localStorage.setItem("username", username)
  }
  next();
});

替代实现方案（更适合全局单次触发） #

如果你不需要每次路由跳转都判断，只需要打开应用时自动执行一次获取JWT的逻辑，完全可以把请求写在根组件App.vue的生命周期钩子中，不需要走路由守卫：

Vue 3 写法 #

<script setup>
import { onMounted } from 'vue'
import axios from 'axios'

onMounted(() => {
  const jwt = localStorage.getItem('jwt')
  if (!jwt) {
    axios.get(`http://localhost:8081/api/users/jwtWithoutLogin`).then(res => {
      localStorage.setItem('jwt', res.data.jwt)
      const payload = JSON.parse(atob(res.data.jwt.split('.')[1]))
      localStorage.setItem("username", payload.username)
    })
  }
})
</script>

Vue 2 写法 #

<script>
import axios from 'axios'
export default {
  mounted() {
    const jwt = localStorage.getItem('jwt')
    if (!jwt) {
      axios.get(`http://localhost:8081/api/users/jwtWithoutLogin`).then(res => {
        localStorage.setItem('jwt', res.data.jwt)
        const payload = JSON.parse(atob(res.data.jwt.split('.')[1]))
        localStorage.setItem("username", payload.username)
      })
    }
  }
}
</script>

额外注意事项 #

• 你的业务依赖session识别用户，需要给axios配置withCredentials: true，否则请求不会携带cookie，后端无法识别同一个用户的session：

// axios全局配置
axios.defaults.withCredentials = true

• 不要仅判断jwt是否存在就直接使用，建议增加过期时间校验，避免使用过期的JWT导致接口鉴权失败。

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