vue中实现登录注册

Vue 中实现登录注册功能

创建登录和注册组件

在 Vue 项目中创建两个组件分别用于登录和注册功能。可以使用 Vue CLI 或手动创建组件文件。

// Login.vue
<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="email" placeholder="Email" type="email" required>
      <input v-model="password" placeholder="Password" type="password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

设置路由

在 router/index.js 中配置登录和注册页面的路由。

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

实现表单验证

可以使用 Vuelidate 或自定义验证方法对表单输入进行验证。

npm install vuelidate

// 在组件中使用
import { required, email, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  validations: {
    email: { required, email },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 验证通过，执行登录
      }
    }
  }
}

与后端API交互

使用 axios 发送 HTTP 请求到后端 API 进行用户认证。

npm install axios

import axios from 'axios'

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      // 处理登录成功
    } catch (error) {
      // 处理错误
    }
  }
}

状态管理

使用 Vuex 管理用户认证状态。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setUser', response.data.user)
        })
    }
  }
})

保护路由

创建路由守卫来保护需要认证的路由。

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

注册功能实现

注册组件与登录类似，但需要额外处理用户创建逻辑。

// Register.vue
<template>
  <div>
    <h2>Register</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="name" placeholder="Name" required>
      <input v-model="email" placeholder="Email" type="email" required>
      <input v-model="password" placeholder="Password" type="password" required>
      <input v-model="confirmPassword" placeholder="Confirm Password" type="password" required>
      <button type="submit">Register</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      if (this.password !== this.confirmPassword) {
        alert("Passwords don't match")
        return
      }
      // 发送注册请求
    }
  }
}
</script>

持久化登录状态

使用 localStorage 或 cookie 持久化用户登录状态。

// 登录成功后
localStorage.setItem('token', response.data.token)
axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`

// 应用初始化时检查
const token = localStorage.getItem('token')
if (token) {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
  store.dispatch('fetchUser')
}

错误处理

为登录注册过程添加适当的错误处理和用户反馈。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      this.$store.commit('setUser', response.data.user)
      this.$router.push('/dashboard')
    } catch (error) {
      if (error.response.status === 401) {
        this.error = 'Invalid credentials'
      } else {
        this.error = 'An error occurred'
      }
    }
  }
}