vue实现登录验证

Vue 登录验证实现方法

基础表单验证

使用 Vue 的 v-model 绑定表单数据，结合 v-if 或 v-show 显示验证错误信息。

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名</label>
      <input v-model="form.username" type="text">
      <span v-if="!form.username">请输入用户名</span>
    </div>
    <div>
      <label>密码</label>
      <input v-model="form.password" type="password">
      <span v-if="!form.password">请输入密码</span>
    </div>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      if (!this.form.username || !this.form.password) {
        alert('请填写完整信息');
        return;
      }
      // 提交登录逻辑
    }
  }
}
</script>

使用 VeeValidate 进行高级验证

安装 VeeValidate 库提供更强大的验证功能。

npm install vee-validate

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>用户名</label>
      <input v-model="username" name="username" v-validate="'required|min:3'">
      <span>{{ errors.first('username') }}</span>
    </div>
    <div>
      <label>密码</label>
      <input v-model="password" name="password" type="password" v-validate="'required|min:6'">
      <span>{{ errors.first('password') }}</span>
    </div>
    <button type="submit">登录</button>
  </form>
</template>

<script>
import { ValidationProvider, extend } from 'vee-validate';
import { required, min } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: '该字段不能为空'
});

extend('min', {
  ...min,
  message: '长度不能小于 {length} 个字符'
});

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$validator.validate().then(valid => {
        if (valid) {
          // 提交登录逻辑
        }
      });
    }
  }
}
</script>

结合后端 API 验证

通过 axios 发送登录请求并处理响应。

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });

      if (response.data.success) {
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } else {
        alert(response.data.message);
      }
    } catch (error) {
      console.error('登录失败:', error);
      alert('登录失败，请稍后再试');
    }
  }
}

路由守卫验证

在路由配置中添加验证逻辑，保护需要登录的页面。

// router.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!localStorage.getItem('token')) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

状态管理集成

使用 Vuex 管理登录状态和用户信息。

// store.js
export default 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: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user);
          localStorage.setItem('token', response.data.token);
        });
    },
    logout({ commit }) {
      commit('logout');
      localStorage.removeItem('token');
    }
  }
});