使用vue实现登录

使用 Vue 实现登录功能

创建登录表单组件

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

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

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

添加表单验证

在提交登录请求前，对输入数据进行验证，确保用户名和密码不为空。

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

发送登录请求

使用 axios 或其他 HTTP 客户端库发送登录请求到后端 API。

import axios from 'axios';

methods: {
  async handleLogin() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码');
      return;
    }

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

      // 处理登录成功
    } catch (error) {
      // 处理登录失败
    }
  }
}

处理登录响应

根据后端返回的响应，处理登录成功或失败的情况。

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

  if (response.data.success) {
    // 存储用户 token
    localStorage.setItem('token', response.data.token);
    // 跳转到首页
    this.$router.push('/');
  } else {
    alert(response.data.message);
  }
} catch (error) {
  alert('登录失败，请稍后重试');
}

添加路由守卫

在 Vue Router 中添加全局前置守卫，保护需要认证的路由。

// 在 router/index.js 中
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token');

  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

添加加载状态

在登录过程中显示加载状态，提升用户体验。

<template>
  <button @click="handleLogin" :disabled="isLoading">
    {{ isLoading ? '登录中...' : '登录' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async handleLogin() {
      this.isLoading = true;
      // 登录逻辑
      this.isLoading = false;
    }
  }
}
</script>

实现记住我功能

添加记住我选项，将登录状态持久化。

<input v-model="rememberMe" type="checkbox" id="remember" />
<label for="remember">记住我</label>

methods: {
  async handleLogin() {
    if (this.rememberMe) {
      localStorage.setItem('rememberedUser', this.username);
    } else {
      localStorage.removeItem('rememberedUser');
    }
    // 登录逻辑
  }
}

添加第三方登录

集成第三方登录如 Google 或 GitHub 登录。

<button @click="loginWithGoogle">Google 登录</button>
<button @click="loginWithGithub">GitHub 登录</button>

methods: {
  loginWithGoogle() {
    // 实现 Google 登录逻辑
  },
  loginWithGithub() {
    // 实现 GitHub 登录逻辑
  }
}

通过以上步骤，可以实现一个完整的 Vue 登录功能，包括表单验证、API 请求、状态管理和路由保护等关键功能。