当前位置：首页 > VUE

vue自动登录功能实现

2026-02-25 05:05:40VUE

实现Vue自动登录功能

自动登录功能通常涉及前端保存用户凭证（如token）并在应用初始化时自动验证。以下是实现方案：

保存登录状态

使用浏览器的localStorage或sessionStorage存储用户token。localStorage持久化存储，sessionStorage仅在当前会话有效：

// 登录成功后保存token
localStorage.setItem('auth_token', response.data.token)

路由守卫验证

在Vue Router的全局前置守卫中检查本地存储的token，实现自动登录验证：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('auth_token')
  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else {
    next()
  }
})

初始化应用时验证token

在Vue应用的main.js或入口文件中添加token验证逻辑：

const token = localStorage.getItem('auth_token')
if (token) {
  store.dispatch('autoLogin', token)
}

自动登录的Vuex处理

在Vuex store中创建自动登录的action：

actions: {
  autoLogin({ commit }, token) {
    return axios.get('/api/verify', {
      headers: { 'Authorization': `Bearer ${token}` }
    }).then(response => {
      commit('SET_USER', response.data.user)
    }).catch(() => {
      localStorage.removeItem('auth_token')
    })
  }
}

安全注意事项

考虑以下安全措施提升自动登录的安全性：

vue自动登录功能实现

设置token过期时间
使用HttpOnly的Cookie替代localStorage存储敏感信息
实现refresh token机制
重要操作仍需密码确认

完整示例代码

// store/modules/auth.js
export default {
  state: {
    user: null,
    token: localStorage.getItem('auth_token') || ''
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('auth_token', token)
    },
    LOGOUT(state) {
      state.user = null
      state.token = ''
      localStorage.removeItem('auth_token')
    }
  },
  actions: {
    async autoLogin({ commit, state }) {
      if (!state.token) return
      try {
        const response = await axios.get('/api/user', {
          headers: { Authorization: `Bearer ${state.token}` }
        })
        commit('SET_USER', response.data)
      } catch (error) {
        commit('LOGOUT')
      }
    }
  }
}

实现自动登录功能时需平衡用户体验与安全性，根据应用场景选择合适的token存储方式和验证机制。