当前位置：首页 > VUE

vue怎么实现登录模块

2026-02-23 02:56:36VUE

登录模块实现步骤

创建登录表单组件

在Vue项目中创建一个登录表单组件，包含用户名和密码输入框以及登录按钮。使用v-model绑定输入数据。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

添加表单验证

使用Vuelidate或其他验证库对输入进行验证，确保用户名和密码符合要求。

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

export default {
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  }
}

实现登录API调用

通过axios发送登录请求到后端API，处理响应结果。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      // 处理成功响应
    } catch (error) {
      // 处理错误
    }
  }
}

处理登录状态

使用Vuex管理用户登录状态，存储token和用户信息。

// store.js
const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, { user, token }) {
      state.user = user
      state.token = token
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('setUser', {
        user: response.data.user,
        token: response.data.token
      })
    }
  }
})

路由守卫保护

使用vue-router的导航守卫保护需要认证的路由。

// router.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.token) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

持久化登录状态

使用localStorage或cookie持久化登录状态，防止页面刷新后丢失。

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

// 应用初始化时检查token
const token = localStorage.getItem('token')
if (token) {
  store.commit('setToken', token)
}

错误处理和反馈

添加错误处理逻辑，显示友好的错误信息给用户。

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

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