vue如何实现登录

Vue 实现登录功能的方法

创建登录表单组件

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

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <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: {
    handleSubmit() {
      // 登录逻辑
    }
  }
}
</script>

处理登录请求

在 handleSubmit 方法中调用后端 API 进行登录验证。可以使用 axios 或其他 HTTP 客户端发送请求。

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

存储用户状态

登录成功后，通常需要存储用户状态（如 token）。可以使用 Vuex 或 Pinia 进行状态管理，也可以直接存储在 localStorage 中。

// 使用 localStorage
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard') // 跳转到主页

路由守卫

为了保护需要登录才能访问的页面，可以在路由配置中添加导航守卫。

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

注销功能

实现注销功能，清除用户状态并重定向到登录页面。

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

错误处理和反馈

在登录失败时，向用户显示错误信息。

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

<script>
export default {
  data() {
    return {
      error: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        // 登录逻辑
      } catch (error) {
        this.error = '用户名或密码错误'
      }
    }
  }
}
</script>