Vue.js自动登录完成后执行Axios请求的问题与解决

这个问题我之前也踩过坑——本质就是异步操作的时序问题：自动登录的异步逻辑还没把用户数据同步到Vuex，依赖这些数据的API请求就已经发起了，自然会拿到null值。你提到的用localStorage持久化数据的思路完全可行，我再给你补充一套更完整的实现方案，确保所有请求都等登录验证完成后再执行：

步骤1：登录成功时持久化用户数据到localStorage #

登录接口调用成功后，除了把数据存到Vuex，同时也存一份到localStorage，这样页面刷新后也能快速拿到有效数据：

// 登录函数示例
async login() {
  try {
    const response = await axios.post('/api/login', this.loginForm);
    const { username, idToken } = response.data;
    
    // 同步到Vuex
    this.$store.commit('SET_USER_INFO', { username, idToken });
    // 持久化到localStorage
    localStorage.setItem('userInfo', JSON.stringify({ username, idToken }));
  } catch (error) {
    console.error('登录失败:', error);
  }
}

步骤2：初始化时完成自动登录并同步数据 #

在应用初始化的地方（比如App.vue的created钩子，或者全局路由守卫），先检查localStorage里的用户数据，有数据的话先完成token有效性校验（可选但推荐），再同步到Vuex，确保后续请求能拿到有效数据：

// App.vue created钩子
async created() {
  const savedUserInfo = localStorage.getItem('userInfo');
  if (savedUserInfo) {
    const { username, idToken } = JSON.parse(savedUserInfo);
    try {
      // 可选：调用后端接口验证token是否有效
      await axios.get('/api/verify-token', { headers: { Authorization: `Token ${idToken}` } });
      // 验证通过后同步到Vuex
      this.$store.commit('SET_USER_INFO', { username, idToken });
    } catch (error) {
      // token无效，清除存储的数据
      localStorage.removeItem('userInfo');
      this.$store.commit('CLEAR_USER_INFO');
      // 跳转到登录页
      this.$router.push('/login');
    }
  }
}

步骤3：用Axios拦截器统一处理请求头 #

不用每个请求都手动拼接headers，直接在Axios拦截器里统一获取token——优先从localStorage拿，避免Vuex还没同步完成的情况：

// 在Axios配置文件中添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    const savedUserInfo = localStorage.getItem('userInfo');
    if (savedUserInfo) {
      const { idToken } = JSON.parse(savedUserInfo);
      config.headers.Authorization = `Token ${idToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

步骤4：用路由守卫确保页面跳转前完成登录验证 #

如果是单页应用，建议在全局路由守卫里添加校验，确保需要登录的页面只有在用户数据就绪后才能访问：

// router/index.js
router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const savedUserInfo = localStorage.getItem('userInfo');

  if (requiresAuth && !savedUserInfo) {
    next('/login');
  } else if (requiresAuth && savedUserInfo) {
    const { idToken } = JSON.parse(savedUserInfo);
    try {
      await axios.get('/api/verify-token', { headers: { Authorization: `Token ${idToken}` } });
      next();
    } catch (error) {
      localStorage.removeItem('userInfo');
      next('/login');
    }
  } else {
    next();
  }
});

这样处理后，就能彻底避免“请求先于用户数据就绪”的问题——因为无论是初始化时的自动登录，还是路由跳转前的校验，都会确保用户数据（至少是localStorage里的）已经存在，Axios请求也会直接从localStorage拿token，不依赖Vuex的同步时序。

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