vue实现登录验证

Vue 实现登录验证的方法

使用表单验证库 VeeValidate

安装 VeeValidate 库，可以快速实现表单验证功能。VeeValidate 提供了丰富的验证规则和错误提示功能。

npm install vee-validate

在 Vue 项目中引入并使用 VeeValidate：

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="handleSubmit">
  <Field name="email" type="email" />
  <ErrorMessage name="email" />

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

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

自定义验证逻辑

如果不使用第三方库，可以通过自定义方法实现验证逻辑。

export default {
  data() {
    return {
      email: '',
      password: '',
      errors: {
        email: '',
        password: '',
      },
    };
  },
  methods: {
    validateForm() {
      this.errors.email = !this.email ? '邮箱不能为空' : '';
      this.errors.password = !this.password ? '密码不能为空' : '';
      return !this.errors.email && !this.errors.password;
    },
    handleSubmit() {
      if (this.validateForm()) {
        // 提交表单逻辑
      }
    },
  },
};

模板部分：

<form @submit.prevent="handleSubmit">
  <input v-model="email" type="email" />
  <span>{{ errors.email }}</span>

  <input v-model="password" type="password" />
  <span>{{ errors.password }}</span>

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

结合后端 API 验证

通常登录验证需要与后端 API 交互，验证用户信息是否正确。

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

    try {
      const response = await axios.post('/api/login', {
        email: this.email,
        password: this.password,
      });
      // 登录成功处理
      localStorage.setItem('token', response.data.token);
      this.$router.push('/dashboard');
    } catch (error) {
      console.error('登录失败', error);
    }
  },
},

路由守卫验证登录状态

使用 Vue Router 的路由守卫功能，确保只有登录用户才能访问特定页面。

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

使用 Vuex 管理登录状态

通过 Vuex 集中管理用户登录状态，方便全局访问。

const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = true;
    },
    logout(state) {
      state.user = null;
      state.isAuthenticated = false;
    },
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials);
      commit('setUser', response.data.user);
    },
  },
});

在组件中使用：

methods: {
  ...mapActions(['login']),
  async handleSubmit() {
    try {
      await this.login({
        email: this.email,
        password: this.password,
      });
      this.$router.push('/dashboard');
    } catch (error) {
      console.error('登录失败', error);
    }
  },
},