当前位置：首页 > VUE

vue的登录实现

2026-01-19 10:03:56VUE

登录功能实现步骤

在Vue中实现登录功能通常涉及前端界面、表单验证、API请求和状态管理。以下是具体实现方法：

创建登录组件

新建一个Login.vue组件，包含表单元素：

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  }
}
</script>

添加表单验证

使用VeeValidate或自定义验证逻辑：

vue的登录实现

methods: {
  validateForm() {
    if (!this.form.username.trim()) {
      alert('请输入用户名');
      return false;
    }
    if (this.form.password.length < 6) {
      alert('密码长度至少6位');
      return false;
    }
    return true;
  }
}

发送登录请求

使用axios发送POST请求到后端API：

import axios from 'axios';

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return;

    try {
      const response = await axios.post('/api/login', this.form);
      localStorage.setItem('token', response.data.token);
      this.$router.push('/dashboard');
    } catch (error) {
      console.error('登录失败:', error);
      alert('登录失败，请检查凭证');
    }
  }
}

状态管理

使用Vuex存储用户登录状态：

vue的登录实现

// store/modules/auth.js
const state = {
  isAuthenticated: false,
  user: null
};

const mutations = {
  LOGIN_SUCCESS(state, user) {
    state.isAuthenticated = true;
    state.user = user;
  }
};

const actions = {
  login({ commit }, credentials) {
    return axios.post('/api/login', credentials)
      .then(response => {
        commit('LOGIN_SUCCESS', response.data.user);
        localStorage.setItem('token', response.data.token);
      });
  }
};

路由守卫

配置路由守卫保护需要认证的页面：

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['auth/isAuthenticated'];
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

响应式导航

根据登录状态动态显示导航项：

<template>
  <nav>
    <router-link to="/login" v-if="!isAuthenticated">登录</router-link>
    <button @click="logout" v-else>退出</button>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('auth', ['isAuthenticated'])
  },
  methods: {
    logout() {
      this.$store.dispatch('auth/logout');
      this.$router.push('/login');
    }
  }
}
</script>