当前位置：首页 > VUE

登录实现逻辑vue

2026-02-18 17:25:17VUE

登录实现逻辑（Vue）

在Vue中实现登录功能通常涉及前端表单处理、API请求、状态管理和路由控制。以下是核心实现逻辑：

表单设计与数据绑定

使用Vue的v-model双向绑定表单数据：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" type="text" placeholder="用户名">
    <input v-model="form.password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  }
}
</script>

请求发送与响应处理

通过Axios发送登录请求到后端API：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', this.form)
      const { token, userInfo } = response.data

      // 存储token（示例使用localStorage）
      localStorage.setItem('authToken', token)

      // 跳转到首页
      this.$router.push('/dashboard')
    } catch (error) {
      alert(error.response.data.message || '登录失败')
    }
  }
}

状态管理（Vuex）

使用Vuex集中管理登录状态：

// store/modules/auth.js
const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials)
      .then(response => {
        commit('SET_TOKEN', response.data.token)
        commit('SET_USER', response.data.user)
      })
  }
}

// 组件中调用
this.$store.dispatch('auth/login', this.form)

路由守卫验证

通过全局前置守卫保护需要认证的路由：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('authToken')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    isAuthenticated ? next() : next('/login')
  } else {
    next()
  }
})

错误处理与验证

添加表单验证逻辑：

methods: {
  validateForm() {
    if (!this.form.username.trim()) {
      this.error = '请输入用户名'
      return false
    }
    if (this.form.password.length < 6) {
      this.error = '密码至少6位'
      return false
    }
    return true
  },

  async handleLogin() {
    if (!this.validateForm()) return
    // ...发送请求逻辑
  }
}

持久化登录状态

在应用初始化时检查token：

// main.js
const token = localStorage.getItem('authToken')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.commit('auth/SET_TOKEN', token)
}