vue3-简单登录认证前端实现样例

**Vue3 简单登录认证前端实现样例**

在本文中，我们将使用 Vue3 来实现一个简单的登录认证系统。我们将创建一个用户登录页面，用户可以输入用户名和密码，然后点击登录按钮进行验证。

### **项目结构**

首先，让我们建立一个新的 Vue3项目：

bashnpm create vite@latest my-login-app -- --template vue

然后，我们进入项目目录：

bashcd my-login-app

安装依赖：

bashnpm install

最后，启动开发服务器：

bashnpm run dev

### **登录页面**

我们首先创建一个 `Login.vue` 组件来实现登录页面：

vue<template>
 <div class="login-container">
 <h1>Login</h1>
 <form @submit.prevent="handleLogin">
 <label for="username">Username:</label>
 <input type="text" id="username" v-model="username" />
 

 <label for="password">Password:</label>
 <input type="password" id="password" v-model="password" />
 

 <button type="submit">Login</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 methods: {
 handleLogin() {
 // 验证逻辑在这里实现 console.log('Username:', this.username)
 console.log('Password:', this.password)
 // ...
 }
 }
}
</script>

<style scoped>
.login-container {
 max-width:300px;
 margin:40px auto;
 padding:20px;
 border:1px solid #ddd;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.1);
}
</style>

### **登录验证逻辑**

在 `handleLogin` 方法中，我们可以实现登录验证逻辑。例如，我们可以使用一个 mock API 来模拟后端的行为：

javascriptimport axios from 'axios'

export default {
 // ...
 methods: {
 async handleLogin() {
 try {
 const response = await axios.post('/api/login', {
 username: this.username,
 password: this.password })
 console.log('登录成功！')
 // ...
 } catch (error) {
 console.error('登录失败：', error)
 // ...
 }
 }
 }
}

### **后端 API**

我们需要在后端实现一个 API 来处理登录请求。例如，我们可以使用 Express.js 来创建一个简单的 API：

javascriptconst express = require('express')
const app = express()

app.post('/api/login', (req, res) => {
 const { username, password } = req.body if (username === 'admin' && password === 'password') {
 res.json({ success: true })
 } else {
 res.status(401).json({ error: 'Invalid credentials' })
 }
})

app.listen(3000, () => {
 console.log('API listening on port3000')
})

### **总结**

在本文中，我们使用 Vue3 来实现一个简单的登录认证系统。我们创建了一个登录页面，用户可以输入用户名和密码，然后点击登录按钮进行验证。在后端，我们使用 Express.js 来处理登录请求，并返回相应的结果。

当然，这只是一个基本示例，你可能需要根据实际需求来扩展和修改代码。但是希望这能给你提供一些参考！