当前位置：首页 > VUE

vue登录逻辑的实现

2026-01-12 00:59:49VUE

Vue 登录逻辑实现

在 Vue 中实现登录逻辑通常涉及前端表单验证、API 请求、状态管理和路由控制。以下是常见的实现方式：

表单组件与数据绑定

使用 Vue 的 v-model 实现表单数据双向绑定：

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

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

表单验证

可以使用 Vuelidate 或手动验证：

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

发送登录请求

通过 axios 发送 POST 请求：

vue登录逻辑的实现

import axios from 'axios';

methods: {
  async handleLogin() {
    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) {
      alert(error.response?.data?.message || '登录失败');
    }
  }
}

状态管理（Vuex）

在 store 中管理登录状态：

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

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    state.isAuthenticated = !!user;
  }
};

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/login', credentials);
    commit('SET_USER', response.data.user);
    localStorage.setItem('token', response.data.token);
  }
};

路由守卫

保护需要认证的路由：

vue登录逻辑的实现

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

持久化登录状态

在应用初始化时检查 token：

// main.js
const token = localStorage.getItem('token');
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  store.dispatch('fetchUser');
}

错误处理

统一处理 API 错误：

// 在 axios 拦截器中
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.commit('LOGOUT');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

响应式导航

根据认证状态显示不同 UI：

<template>
  <div v-if="isAuthenticated">
    欢迎, {{ user.name }}!
    <button @click="logout">退出</button>
  </div>
  <div v-else>
    <router-link to="/login">登录</router-link>
  </div>
</template>

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

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