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: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

实现登录请求

在 handleLogin 方法中发送登录请求到后端 API。可以使用 axios 或其他 HTTP 客户端库。

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

处理登录响应

成功登录后，保存返回的认证信息（如 token）到本地存储或 Vuex 状态管理。

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

localStorage.setItem('authToken', response.data.token)
this.$store.commit('setUser', response.data.user)
this.$router.push('/dashboard')

路由守卫配置

在路由配置中添加导航守卫，保护需要认证的路由。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('authToken')
  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
    }
  }
})

注销功能实现

提供注销功能，清除本地存储的认证信息和重置 Vuex 状态。

methods: {
  logout() {
    localStorage.removeItem('authToken')
    this.$store.commit('logout')
    this.$router.push('/login')
  }
}

错误处理

完善登录过程中的错误处理，包括网络错误和认证失败等情况。

async handleLogin() {
  try {
    const response = await axios.post('/api/login', {
      username: this.username,
      password: this.password
    })
    // 成功处理
  } catch (error) {
    if (error.response) {
      // 服务器返回的错误
      alert(error.response.data.message)
    } else {
      // 网络或其他错误
      alert('登录失败，请稍后重试')
    }
  }
}

表单验证

添加基本的表单验证，确保输入符合要求。

methods: {
  async handleLogin() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码')
      return
    }
    // 继续登录逻辑
  }
}

加载状态

添加加载状态反馈，提升用户体验。

data() {
  return {
    loading: false
  }
},
methods: {
  async handleLogin() {
    this.loading = true
    try {
      // 登录逻辑
    } finally {
      this.loading = false
    }
  }
}