当前位置：首页 > VUE

vue登录流程实现

2026-01-18 18:56:55VUE

登录流程实现

在Vue中实现登录流程通常涉及前端页面、表单验证、API请求、状态管理和路由跳转等多个环节。以下是常见的实现步骤：

创建登录组件

新建一个Login.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>

表单验证

使用Vuelidate或手动验证确保输入合法性：

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleLogin() {
      if (this.$v.$invalid) {
        alert('请填写完整信息')
        return
      }
      // 继续登录流程
    }
  }
}

调用登录API

通过axios发送登录请求到后端接口：

methods: {
  async handleLogin() {
    try {
      const res = await axios.post('/api/login', this.form)
      localStorage.setItem('token', res.data.token)
      // 跳转到首页
    } catch (error) {
      console.error('登录失败:', error.response.data.message)
    }
  }
}

状态管理

使用Vuex存储用户登录状态：

// store/modules/auth.js
const actions = {
  login({ commit }, userData) {
    return axios.post('/api/login', userData).then(res => {
      commit('SET_USER', res.data.user)
      localStorage.setItem('token', res.data.token)
    })
  }
}

路由配置

设置路由守卫保护需要认证的页面：

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

持久化登录状态

在应用初始化时检查本地存储的token：

// main.js
const token = localStorage.getItem('token')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.dispatch('fetchUser')
}

错误处理

显示友好的错误提示：

<template>
  <div v-if="error" class="error-message">
    {{ error }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        // ...登录逻辑
      } catch (err) {
        this.error = err.response?.data?.message || '登录失败'
      }
    }
  }
}
</script>