vue实现用户登录

Vue 实现用户登录的步骤

创建登录表单组件

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

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

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

处理登录请求

在 handleLogin 方法中调用后端 API 进行用户验证。通常使用 axios 或 fetch 发送 HTTP 请求。

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

存储用户登录状态

登录成功后，将用户 token 或会话信息存储在本地（如 localStorage 或 Vuex 状态管理库）。

// 使用 localStorage
localStorage.setItem('userToken', response.data.token)

// 使用 Vuex
this.$store.commit('setUser', response.data.user)

路由跳转

登录成功后，使用 Vue Router 跳转到主页或其他受保护的路由。

this.$router.push('/dashboard')

添加路由守卫

为了保护需要登录才能访问的路由，可以在 Vue Router 中添加全局前置守卫。

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

处理错误情况

在登录失败时显示错误信息给用户，增强用户体验。

<template>
  <div>
    <div v-if="error" class="error-message">{{ error }}</div>
    <!-- 表单内容 -->
  </div>
</template>

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

添加表单验证

在提交前对表单进行基本验证，减少不必要的请求。

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

实现记住我功能

如果需要记住用户登录状态，可以在登录时设置更长的 token 有效期或使用 cookie。

// 设置长期有效的 token
localStorage.setItem('rememberMe', true)

响应式更新 UI

根据登录状态动态更新 UI，如显示/隐藏登录按钮或用户头像。

<template>
  <div>
    <button v-if="!isLoggedIn" @click="showLogin">登录</button>
    <div v-else>
      <span>{{ username }}</span>
      <button @click="logout">退出</button>
    </div>
  </div>
</template>

实现退出功能

提供退出登录的功能，清除用户数据和 token。

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