vue用户功能实现

Vue 用户功能实现方案

用户登录与认证

使用 Vue Router 和 Vuex 实现用户登录状态管理。前端发送登录请求到后端 API，获取 token 后存储在 localStorage 或 Vuex 中。

// 登录方法示例
methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      localStorage.setItem('token', response.data.token);
      this.$store.commit('setUser', response.data.user);
      this.$router.push('/dashboard');
    } catch (error) {
      console.error('登录失败', error);
    }
  }
}

用户注册功能

创建注册表单组件，包含用户名、密码、邮箱等字段。前端验证通过后提交到后端 API。

// 注册验证示例
data() {
  return {
    form: {
      username: '',
      email: '',
      password: '',
      confirmPassword: ''
    },
    rules: {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      email: [{ type: 'email', message: '请输入有效的邮箱', trigger: 'blur' }]
    }
  };
}

用户信息管理

实现用户个人资料编辑功能，包括基本信息修改和头像上传。

// 头像上传示例
methods: {
  handleAvatarUpload(file) {
    const formData = new FormData();
    formData.append('avatar', file);
    axios.post('/api/upload-avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(response => {
      this.$store.commit('updateUserAvatar', response.data.avatarUrl);
    });
  }
}

权限控制

通过路由守卫实现页面级权限控制，结合后端返回的用户角色信息。

// 路由守卫示例
router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters.isAuthenticated;
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

密码重置

实现密码找回流程，包括发送重置链接邮件和设置新密码页面。

// 发送重置密码邮件
methods: {
  async sendResetEmail() {
    if (!this.email) return;
    try {
      await axios.post('/api/send-reset-email', { email: this.email });
      this.$message.success('重置链接已发送至您的邮箱');
    } catch (error) {
      this.$message.error('发送失败');
    }
  }
}

用户列表与搜索

管理员界面实现用户列表展示和搜索功能，支持分页和筛选。

// 用户搜索方法
methods: {
  handleSearch() {
    this.loading = true;
    axios.get('/api/users', {
      params: {
        page: this.currentPage,
        keyword: this.keyword
      }
    }).then(response => {
      this.users = response.data.users;
      this.total = response.data.total;
    }).finally(() => {
      this.loading = false;
    });
  }
}