前端实现登录验证vue

前端实现登录验证（Vue）

使用 Vue 表单验证库（VeeValidate）

安装 VeeValidate 库：

npm install vee-validate

在 Vue 项目中引入并配置：

import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    return {
      schema: yup.object({
        email: yup.string().required().email(),
        password: yup.string().required().min(6),
      }),
    };
  },
};

模板中使用：

<Form :validation-schema="schema" @submit="handleLogin">
  <Field name="email" type="email" />
  <ErrorMessage name="email" />

  <Field name="password" type="password" />
  <ErrorMessage name="password" />

  <button type="submit">登录</button>
</Form>

自定义验证规则

在 Vue 组件中定义本地验证规则：

methods: {
  validateEmail(value) {
    if (!value) return '邮箱不能为空';
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regex.test(value)) return '请输入有效的邮箱地址';
    return true;
  },
  validatePassword(value) {
    if (!value) return '密码不能为空';
    if (value.length < 6) return '密码长度至少6位';
    return true;
  },
  handleSubmit() {
    this.$refs.form.validate().then(success => {
      if (success) {
        // 提交逻辑
      }
    });
  }
}

结合 Element UI 的表单验证

安装 Element UI：

npm install element-ui

使用示例：

<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm">
    <el-form-item prop="email">
      <el-input v-model="loginForm.email" placeholder="邮箱"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 提交逻辑
        }
      });
    }
  }
};
</script>

实现 JWT 认证流程

登录成功后处理 token：

axios.post('/api/login', this.loginForm)
  .then(response => {
    const token = response.data.token;
    localStorage.setItem('auth_token', token);
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    this.$router.push('/dashboard');
  })
  .catch(error => {
    console.error('登录失败:', error);
  });

路由守卫验证

在 router.js 中配置全局前置守卫：

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

表单状态反馈

添加加载状态和错误提示：

data() {
  return {
    loading: false,
    errorMessage: ''
  };
},
methods: {
  async handleLogin() {
    this.loading = true;
    try {
      await authService.login(this.email, this.password);
      this.$router.push('/dashboard');
    } catch (error) {
      this.errorMessage = error.response?.data?.message || '登录失败';
    } finally {
      this.loading = false;
    }
  }
}