Vuex状态仅在页面刷新后更新问题求助

问题描述 #

登录提交表单完成API调用并存储Bearer Token后，跳转至首页，欢迎用户的名称未显示，系统判定用户未登录，但手动刷新页面后一切正常。

核心原因 #

App.vue的created钩子中异步请求/user获取用户信息的操作，若在登录流程完成前处于pending状态，登录后该请求返回失败（比如未携带token），会覆盖掉登录时通过commit存入Vuex的用户信息，导致首页无法读取到已登录的用户数据。

解决方案 #

1. 修复App.vue的初始化请求错误处理 #

修改App.vue中的created钩子，仅在请求成功时更新Vuex的用户状态，避免失败请求覆盖已登录的用户信息：

<script>
import Nav from './components/Nav.vue'
import axios from 'axios';

export default {
  name: 'App',
  components: {
    Nav,
  },
  async created(){
      try {
          const response = await axios.get('user');
          this.$store.commit('user', response.data);
      } catch (error) {
          // 未登录或请求失败时，不修改Vuex中的user状态
          console.error('获取用户信息失败:', error);
      }
  }
}
</script>

2. 配置Axios请求拦截器自动携带Token #

确保axios.js中添加请求拦截器，每次请求自动从localStorage读取Token并设置到请求头，这样后续的API请求（包括刷新页面时的/user请求）都能正确携带Token：

import axios from 'axios';
import store from './vuex';
import router from './router';

// 根据你的实际API地址设置baseURL
axios.defaults.baseURL = 'https://your-api-domain.com/';

// 请求拦截器：添加Bearer Token
axios.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => Promise.reject(error)
);

// 响应拦截器：处理401未授权
axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response?.status === 401) {
            // 清除Token和用户状态，跳转登录页
            localStorage.removeItem('token');
            store.commit('user', null);
            router.push('/login');
        }
        return Promise.reject(error);
    }
);

export default axios;

3. 确认登录流程的状态更新正确 #

检查Login.vue中的登录逻辑，确保登录成功后正确将用户信息提交到Vuex：

<script>
import axios from 'axios';

export default{
    name: 'Login',
    data() {
        return {
            email: '',
            password: '',
        }
    },
    methods: {
         async handleSubmit(){
            try {
                const response =  await axios.post('auth/login', {
                    email: this.email,
                    password: this.password
                });

                localStorage.setItem('token', response.data.token);
                // 确保response.data.user是正确的用户对象
                this.$store.commit('user', response.data.user);
                this.$router.push('/');
            } catch (error) {
                console.error('登录失败:', error);
                // 可以在这里添加错误提示，比如用sweetalert2
                this.$swal('登录失败', error.response?.data?.message || '请检查账号密码', 'error');
            }
        }
    }
}
</script>

验证效果 #

完成上述修改后，登录成功跳转首页时，Vuex中已存储用户信息，App.vue的失败请求不会覆盖该状态，首页和导航栏将直接显示用户登录状态，无需手动刷新页面。

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