vue 实现登陆

实现登录功能的基本步骤

在Vue中实现登录功能通常需要前端与后端的配合。前端负责收集用户输入、发送请求并处理响应，后端负责验证用户信息并返回认证结果。以下是Vue实现登录功能的基本步骤：

创建登录表单组件，包含用户名和密码输入框，以及提交按钮。使用Vue的v-model指令实现双向数据绑定，方便获取用户输入。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

处理登录请求

在Vue组件中定义handleLogin方法，使用axios或fetch API发送登录请求到后端API。处理成功和失败的响应，并根据结果进行相应操作。

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)
    }
  }
}

状态管理与路由守卫

使用Vuex管理登录状态，创建auth模块存储用户信息和登录状态。在路由守卫中检查登录状态，保护需要认证的路由。

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

const mutations = {
  SET_AUTH(state, payload) {
    state.isAuthenticated = payload.isAuthenticated
    state.user = payload.user
  }
}

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

持久化登录状态

实现刷新页面后保持登录状态，在应用初始化时检查本地存储中的token，并验证其有效性。

created() {
  const token = localStorage.getItem('token')
  if (token) {
    this.validateToken(token)
  }
},

methods: {
  async validateToken(token) {
    try {
      const response = await axios.get('/api/validate', {
        headers: { Authorization: `Bearer ${token}` }
      })
      this.$store.commit('SET_AUTH', {
        isAuthenticated: true,
        user: response.data.user
      })
    } catch (error) {
      localStorage.removeItem('token')
    }
  }
}

错误处理与用户体验

添加加载状态和错误提示，改善用户体验。在表单提交时显示加载状态，防止重复提交。

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

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