vue登录模块实现

Vue登录模块实现

创建登录表单组件

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

<template>
  <div class="login-form">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

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

表单验证

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

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      if (this.$v.$invalid) {
        alert('请填写正确的用户名和密码')
        return
      }
      // 登录逻辑
    }
  }
}

调用登录API

通过Axios或其他HTTP库调用后端登录API，发送用户名和密码。

methods: {
  async handleLogin() {
    if (this.$v.$invalid) return

    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      // 处理登录成功
    } catch (error) {
      // 处理登录失败
    }
  }
}

处理登录响应

根据API返回结果处理登录成功或失败的情况，成功时保存用户token并跳转页面。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })

      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败：' + error.response.data.message)
    }
  }
}

路由守卫配置

在Vue Router中配置全局前置守卫，保护需要登录才能访问的路由。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

状态管理

使用Vuex管理用户登录状态，确保应用各组件能获取当前用户信息。

const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  }
})

登录组件集成

将登录组件集成到应用中，并处理登录后的状态更新和页面跳转。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })

      this.$store.commit('setUser', response.data.user)
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败')
    }
  }
}

错误处理和用户体验

添加加载状态和错误提示，提升用户体验。

<template>
  <div class="login-form">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin" :disabled="isLoading">
      {{ isLoading ? '登录中...' : '登录' }}
    </button>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      error: null
    }
  },
  methods: {
    async handleLogin() {
      this.isLoading = true
      this.error = null

      try {
        // 登录逻辑
      } catch (error) {
        this.error = '登录失败，请检查用户名和密码'
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>