当前位置：首页 > VUE

登录实现逻辑vue

2026-01-18 00:54:56VUE

登录实现逻辑（Vue）

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

表单设计与双向绑定

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

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.username" 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发送POST请求到后端API：

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

      // 存储token和用户信息
      localStorage.setItem('token', token)
      this.$store.commit('setUser', userInfo)

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

Vuex状态管理

在store中管理用户状态和登录状态：

// store/auth.js
const state = {
  user: null,
  isAuthenticated: false
}

const mutations = {
  setUser(state, user) {
    state.user = user
    state.isAuthenticated = !!user
  },
  logout(state) {
    state.user = null
    state.isAuthenticated = false
  }
}

路由守卫验证

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

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.state.auth.isAuthenticated

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else if (to.path === '/login' && isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

持久化登录状态

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

// main.js
const token = localStorage.getItem('token')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.dispatch('fetchUserInfo') // 获取最新用户信息
}

错误处理与反馈

使用Element UI或Toast组件显示错误信息：

methods: {
  async handleLogin() {
    try {
      // ...登录逻辑
    } catch (error) {
      this.$message.error(error.response?.data?.message || '登录失败')
    }
  }
}