vue实现登录注册验证

Vue 登录注册验证实现

表单设计与验证

使用 Vue 的 v-model 绑定表单数据，结合 vuelidate 或 vee-validate 进行表单验证。例如，定义一个包含 email 和 password 字段的数据对象：

data() {
  return {
    form: {
      email: '',
      password: ''
    },
    errors: {}
  }
}

通过计算属性或方法验证字段，例如检查邮箱格式：

methods: {
  validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
}

异步请求与后端交互

使用 axios 发送登录或注册请求，处理响应和错误：

import axios from 'axios';

methods: {
  async submitForm() {
    try {
      const response = await axios.post('/api/login', this.form);
      localStorage.setItem('token', response.data.token);
      this.$router.push('/dashboard');
    } catch (error) {
      this.errors = error.response.data.errors;
    }
  }
}

路由守卫与权限控制

在 Vue Router 中配置全局前置守卫，检查用户是否登录：

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

状态管理

使用 Vuex 管理用户登录状态和 token：

const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload.user;
      state.token = payload.token;
    }
  }
});

错误处理与反馈

通过 v-if 或 v-show 显示错误信息，增强用户体验：

<div v-if="errors.email" class="error">{{ errors.email }}</div>

安全注意事项

确保后端对密码进行哈希处理，前端避免存储敏感信息。使用 HTTPS 传输数据，设置合理的 token 过期时间。