当前位置：首页 > VUE

vue怎样实现登录注册

2026-02-22 02:08:04VUE

Vue 实现登录注册功能

前端部分（Vue.js）

创建登录和注册组件，使用 Vue Router 进行页面导航。

// Login.vue
<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      this.$axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      })
    }
  }
}
</script>

// Register.vue
<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="email" placeholder="邮箱">
    <input v-model="password" type="password" placeholder="密码">
    <input v-model="confirmPassword" type="password" placeholder="确认密码">
    <button @click="register">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    register() {
      if(this.password !== this.confirmPassword) {
        alert('两次密码输入不一致')
        return
      }

      this.$axios.post('/api/register', {
        username: this.username,
        email: this.email,
        password: this.password
      }).then(response => {
        alert('注册成功')
        this.$router.push('/login')
      })
    }
  }
}
</script>

后端部分（Node.js示例）

const express = require('express')
const jwt = require('jsonwebtoken')
const bcrypt = require('bcrypt')
const app = express()

app.use(express.json())

const users = [] // 临时存储用户数据

app.post('/api/register', async (req, res) => {
  try {
    const hashedPassword = await bcrypt.hash(req.body.password, 10)
    const user = {
      username: req.body.username,
      email: req.body.email,
      password: hashedPassword
    }
    users.push(user)
    res.status(201).send()
  } catch {
    res.status(500).send()
  }
})

app.post('/api/login', async (req, res) => {
  const user = users.find(user => user.username === req.body.username)
  if (user == null) {
    return res.status(400).send('用户不存在')
  }
  try {
    if (await bcrypt.compare(req.body.password, user.password)) {
      const token = jwt.sign({ username: user.username }, 'secret_key')
      res.json({ token })
    } else {
      res.status(403).send('密码错误')
    }
  } catch {
    res.status(500).send()
  }
})

app.listen(3000)

路由配置

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

Vue.use(Router)

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

状态管理（Vuex）

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    loginSuccess(state, user) {
      state.isAuthenticated = true
      state.user = user
    },
    logout(state) {
      state.isAuthenticated = false
      state.user = null
    }
  }
})

请求拦截器

// main.js
import axios from 'axios'

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

表单验证

使用 Vuelidate 进行表单验证：

vue怎样实现登录注册

import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: ''
    }
  },
  validations: {
    username: { required },
    email: { required, email },
    password: { required, minLength: minLength(6) },
    confirmPassword: { sameAs: sameAs('password') }
  }
}