当前位置：首页 > VUE

vue 实现注册登录

2026-01-16 21:27:25VUE

实现注册登录功能

在Vue中实现注册登录功能需要结合前端和后端交互。以下是具体实现步骤：

前端页面结构

创建两个组件：Login.vue和Register.vue，使用Vue Router进行路由切换：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}
</script>

注册功能实现

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

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    async handleRegister() {
      if(this.password !== this.confirmPassword) {
        alert('两次密码不一致')
        return
      }
      try {
        await axios.post('/api/register', {
          username: this.username,
          password: this.password
        })
        alert('注册成功')
        this.$router.push('/login')
      } catch (error) {
        alert('注册失败')
      }
    }
  }
}
</script>

路由配置

在router/index.js中配置路由：

vue 实现注册登录

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

Vue.use(Router)

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

状态管理

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

// store/index.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中设置axios拦截器，自动添加token：

vue 实现注册登录

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

后端API示例

假设使用Node.js Express作为后端：

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

app.post('/api/login', (req, res) => {
  // 验证用户名密码
  const token = jwt.sign({ userId: user.id }, 'secret_key', { expiresIn: '1h' })
  res.json({ token })
})

app.post('/api/register', (req, res) => {
  // 创建用户逻辑
  res.json({ success: true })
})

表单验证

可以添加简单的表单验证：

methods: {
  validateForm() {
    if(!this.username || !this.password) {
      alert('请填写完整信息')
      return false
    }
    return true
  },
  async handleLogin() {
    if(!this.validateForm()) return
    // 登录逻辑
  }
}