Vue结合Vuex按登录状态切换显示登录/登出按钮问题排查

存在的核心错误 #

• Mutation 违规写异步逻辑：Vuex 要求 Mutation 必须是纯同步函数，你把登录接口请求放在 Mutation 里执行，异步修改 state 会导致状态变更无法被 Vue 响应式追踪，也无法被 DevTools 正常捕获，是导致渲染不更新的核心原因。
• Logout 逻辑顺序完全错误：你在 logout Mutation 里先执行 location.reload()，页面刷新后后续修改 state.isLogin = false 的代码根本不会执行，且刷新会清空所有未持久化的 Vuex 状态，完全没必要用刷新来更新界面。
• 未做登录状态持久化：Vuex 状态存在内存中，页面刷新后会自动重置为初始值，就算你登录成功修改了 isLogin，只要用户刷新页面登录状态就会丢失。
• 模板直接访问深层 State：虽然不是必现问题，但直接在模板写多层级的 state 取值，容易出现响应式丢失问题，建议用计算属性封装。

修复步骤 #

1. 重构Vuex登录模块，异步逻辑移到Action #

import axios from 'axios'

export default {
  namespaced: true,
  state: {
    // 不要把用户明文账号密码存在state里，非常不安全
    isLogin: false,
    isLoginError: false
  },
  mutations: {
    // Mutation只负责同步修改状态
    SET_LOGIN_STATE(state, status) {
      state.isLogin = status
    },
    SET_LOGIN_ERROR(state, status) {
      state.isLoginError = status
    },
    // 初始化从本地存储取登录状态，解决刷新丢失问题
    INIT_LOGIN_STATE(state) {
      state.isLogin = localStorage.getItem('isLogin') === 'true'
    }
  },
  actions: {
    async login({ commit }, userInfo) {
      try {
        const res = await axios.post('http://??.???.???.???:????/api/login', userInfo)
        if(res.data.code === "E0008") {  
          alert("로그인 완료")
          commit('SET_LOGIN_STATE', true)
          commit('SET_LOGIN_ERROR', false)
          // 持久化登录状态到本地存储
          localStorage.setItem('isLogin', 'true')
        }
      } catch(err) {
        alert("아이디 또는 비밀번호를 정확히 입력해 주세요.")
        commit('SET_LOGIN_ERROR', true)
      }
    },
    logout({ commit }) {
      commit('SET_LOGIN_STATE', false)
      // 清除本地存储的登录状态
      localStorage.removeItem('isLogin')
    }
  }
}

2. 全局初始化登录状态 #

在项目入口文件（如main.js）或者根组件App.vue的created钩子中调用初始化Mutation：

created() {
  this.$store.commit('loginService/INIT_LOGIN_STATE')
}

3. 优化Header组件逻辑 #

删除无用的location.reload()，用计算属性绑定登录状态，保证响应式：

<template>
  <li>
    <RouterLink
      v-if="!isLogin"
      to="/Login"
      active-class="active"
      class="nav-link"
    >
      로그인
    </RouterLink>
    <button
      v-else
      type="button"
      @click="UserLogout"
      class="nav-link btn btn-primary btn-sm"
    >
      로그아웃
    </button>
  </li>
</template>

<script>
export default {
  computed: {
    isLogin() {
      return this.$store.state.loginService.isLogin
    }
  },
  methods: {
    async UserLogout() {
      await this.$store.dispatch('loginService/logout')
      // 登出后跳转到登录页即可，无需刷新页面
      this.$router.push('/Login')
    }
  }
}
</script>

优化建议 #

如果项目登录状态需要更高的安全性，可把登录态存在sessionStorage里，关闭浏览器就自动清除，也可以配套JWT令牌校验，避免本地存储被篡改。

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