当前位置：首页 > VUE

登录实现逻辑vue

2026-03-10 06:39:37VUE

登录实现逻辑（Vue）

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

表单设计与双向绑定

使用v-model绑定表单数据，结合el-form或原生表单元素：

<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发送登录请求，处理成功/失败场景：

methods: {
  async handleLogin() {
    try {
      const res = await axios.post('/api/login', this.form)
      localStorage.setItem('token', res.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert(error.response?.data?.message || '登录失败')
    }
  }
}

状态管理（Vuex/Pinia）

使用状态管理工具存储用户信息（以Pinia为例）：

// stores/auth.js
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    isAuthenticated: false
  }),
  actions: {
    setUser(userData) {
      this.user = userData
      this.isAuthenticated = true
    }
  }
})

路由守卫控制

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

// router/index.js
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const token = localStorage.getItem('token')

  if (requiresAuth && !token) {
    next('/login')
  } else {
    next()
  }
})

错误处理与验证

添加表单验证逻辑（使用Vuelidate或手动验证）：

validations: {
  form: {
    username: { required },
    password: { required, minLength: minLength(6) }
  }
},
methods: {
  handleLogin() {
    if (this.$v.$invalid) {
      this.$v.$touch()
      return
    }
    // 发送请求...
  }
}

持久化登录状态

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

登录实现逻辑vue

created() {
  const token = localStorage.getItem('token')
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    // 可选：获取用户信息
  }
}