vue登录注册实现说
Vue 登录注册实现
前端实现
使用 Vue CLI 创建一个新项目，安装必要的依赖如 Vue Router 和 Axios。
vue create auth-app
cd auth-app
npm install vue-router axios创建登录和注册组件，在 src/components 目录下创建 Login.vue 和 Register.vue。
<!-- Login.vue -->
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="handleLogin">
<input v-model="email" type="email" placeholder="Email" required>
<input v-model="password" type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
email: this.email,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error(error)
}
}
}
}
</script><!-- Register.vue -->
<template>
<div>
<h2>Register</h2>
<form @submit.prevent="handleRegister">
<input v-model="name" type="text" placeholder="Name" required>
<input v-model="email" type="email" placeholder="Email" required>
<input v-model="password" type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
password: ''
}
},
methods: {
async handleRegister() {
try {
const response = await axios.post('/api/register', {
name: this.name,
email: this.email,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error(error)
}
}
}
}
</script>配置路由，在 src/router/index.js 中设置路由。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Dashboard from '../components/Dashboard.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/dashboard', component: Dashboard }
]
})后端实现
使用 Node.js 和 Express 创建一个简单的后端服务，处理登录和注册请求。
mkdir server
cd server
npm init -y
npm install express body-parser jsonwebtoken bcryptjs cors创建 server.js 文件。
const express = require('express')
const bodyParser = require('body-parser')
const jwt = require('jsonwebtoken')
const bcrypt = require('bcryptjs')
const cors = require('cors')
const app = express()
app.use(bodyParser.json())
app.use(cors())
const users = []
app.post('/api/register', async (req, res) => {
const { name, email, password } = req.body
const hashedPassword = await bcrypt.hash(password, 10)
users.push({ name, email, password: hashedPassword })
const token = jwt.sign({ email }, 'secret_key', { expiresIn: '1h' })
res.json({ token })
})
app.post('/api/login', async (req, res) => {
const { email, password } = req.body
const user = users.find(user => user.email === email)
if (!user) return res.status(400).json({ message: 'User not found' })
const validPassword = await bcrypt.compare(password, user.password)
if (!validPassword) return res.status(400).json({ message: 'Invalid password' })
const token = jwt.sign({ email }, 'secret_key', { expiresIn: '1h' })
res.json({ token })
})
app.listen(3001, () => {
console.log('Server running on port 3001')
})前后端联调
在 Vue 项目的 src/main.js 中配置 Axios 默认 baseURL。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3001'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')启动前端和后端服务，分别在不同的终端运行。
# 前端
npm run serve
# 后端
node server.js访问 http://localhost:8080/login 或 http://localhost:8080/register 测试功能。
