当前位置：首页 > VUE

vue实现线上登录

2026-03-09 03:43:08VUE

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 方法中，使用 axios 或其他 HTTP 库发送登录请求到后端 API。处理成功和失败的响应。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      // 处理成功响应
    } catch (error) {
      // 处理错误
    }
  }
}

处理登录状态

登录成功后，保存用户 token 到本地存储（如 localStorage）或 Vuex 状态管理库。可以使用 vue-router 跳转到主页或其他受保护的路由。

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) {
      console.error('登录失败:', error);
    }
  }
}

路由守卫配置

配置路由守卫，检查用户是否已登录。未登录用户尝试访问受保护路由时，重定向到登录页面。

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

注销功能

实现注销功能，清除本地存储的 token 并重定向到登录页面。

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

错误处理和反馈

在登录过程中添加错误处理和用户反馈，例如显示错误消息或加载状态。

vue实现线上登录

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit" :disabled="loading">
      {{ loading ? '登录中...' : '登录' }}
    </button>
    <p v-if="error" class="error">{{ error }}</p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false,
      error: ''
    };
  },
  methods: {
    async handleLogin() {
      this.loading = true;
      this.error = '';
      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) {
        this.error = '用户名或密码错误';
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>