vue实现登录逻辑

Vue 登录逻辑实现

1. 创建登录组件 在 Vue 项目中创建一个登录组件，通常命名为 Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。

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

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

2. 实现登录请求 在 handleLogin 方法中，使用 Axios 或其他 HTTP 客户端向后端发送登录请求。通常需要传递用户名和密码作为请求体。

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

3. 处理登录响应 登录成功后，后端通常会返回一个 token 或用户信息。将这些数据存储在 Vuex 或本地存储中，以便后续请求使用。

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('登录失败，请检查用户名或密码')
    }
  }
}

4. 路由守卫 使用 Vue Router 的路由守卫功能，确保未登录用户无法访问受保护的路由。

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

5. 注销功能 提供注销功能，清除存储的 token 并重定向到登录页面。

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

6. 表单验证 添加基本的表单验证，确保用户名和密码不为空。

methods: {
  async handleLogin() {
    if (!this.username || !this.password) {
      alert('用户名和密码不能为空')
      return
    }
    // 其他逻辑
  }
}

7. 使用 Vuex 管理状态 如果需要更复杂的状态管理，可以使用 Vuex 存储用户登录状态。

// store.js
export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

// Login.vue
methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      this.$store.commit('setToken', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败')
    }
  }
}

8. 错误处理 增强错误处理逻辑，显示更详细的错误信息。

methods: {
  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('网络错误，请稍后重试')
      }
    }
  }
}

9. 加载状态 添加加载状态，提升用户体验。

data() {
  return {
    username: '',
    password: '',
    isLoading: false
  }
},
methods: {
  async handleLogin() {
    this.isLoading = true
    try {
      // 登录逻辑
    } catch (error) {
      // 错误处理
    } finally {
      this.isLoading = false
    }
  }
}

10. 记住登录状态 可选功能，使用 cookie 或 localStorage 实现记住登录状态。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password,
        remember: this.rememberMe
      })
      if (this.rememberMe) {
        localStorage.setItem('token', response.data.token)
      } else {
        sessionStorage.setItem('token', response.data.token)
      }
    } catch (error) {
      // 错误处理
    }
  }
}