当前位置：首页 > VUE

vue用户功能实现

2026-02-18 13:58:15VUE

Vue用户功能实现方案

用户功能是Web应用的核心模块之一，通常包括注册、登录、个人信息管理等功能。以下是基于Vue.js的实现方案：

用户注册功能

创建注册表单组件，包含用户名、邮箱、密码等字段

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="form.username" placeholder="用户名">
    <input v-model="form.email" placeholder="邮箱">
    <input v-model="form.password" type="password" placeholder="密码">
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleRegister() {
      try {
        await this.$axios.post('/api/register', this.form)
        this.$router.push('/login')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

用户登录功能

实现登录逻辑并管理用户会话

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="form.email" placeholder="邮箱">
    <input v-model="form.password" type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const { data } = await this.$axios.post('/api/login', this.form)
        localStorage.setItem('token', data.token)
        this.$store.commit('setUser', data.user)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

用户状态管理

使用Vuex管理全局用户状态

// store/index.js
export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  }
})

路由守卫配置

保护需要认证的路由

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

用户资料管理

实现用户信息编辑功能

<template>
  <div v-if="user">
    <h2>个人资料</h2>
    <form @submit.prevent="updateProfile">
      <input v-model="user.name" placeholder="姓名">
      <input v-model="user.email" placeholder="邮箱">
      <button type="submit">更新</button>
    </form>
  </div>
</template>

<script>
export default {
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    async updateProfile() {
      try {
        await this.$axios.put('/api/user', this.user)
        this.$store.commit('setUser', this.user)
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

密码重置功能

实现密码重置流程

<template>
  <form @submit.prevent="requestReset">
    <input v-model="email" placeholder="注册邮箱">
    <button type="submit">发送重置链接</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    async requestReset() {
      try {
        await this.$axios.post('/api/password/reset', { email: this.email })
        alert('重置链接已发送至您的邮箱')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>