当前位置：首页 > VUE

vue实现登录流程

2026-02-17 08:33:02VUE

登录流程实现步骤

在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或自定义验证规则：

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 res = await axios.post('/api/login', this.form);
      localStorage.setItem('token', res.data.token);
      this.$router.push('/dashboard');
    } catch (error) {
      alert(error.response.data.message);
    }
  }
}

路由配置

在router/index.js中配置登录路由和守卫：

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

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

状态管理

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

// store/modules/auth.js
const state = {
  user: null,
  isAuthenticated: !!localStorage.getItem('token')
}

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    state.isAuthenticated = true;
  },
  LOGOUT(state) {
    state.user = null;
    state.isAuthenticated = false;
  }
}

const actions = {
  login({ commit }, userData) {
    return authService.login(userData)
      .then(user => commit('SET_USER', user))
  }
}

响应拦截处理

在axios拦截器中添加token自动附加：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

错误处理优化

统一处理401未授权错误：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      store.dispatch('auth/logout');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);