实现用户认证功能：Vue与JWT
在现代前端开发中，用户认证是一个极为重要的功能，常常涉及到用户数据的安全管理。本文将为您展示如何使用 Vue.js 与 JWT（JSON Web Token）实现用户认证功能。我们将通过一个简单的示例，展示如何在 Vue 3 中使用 Composition API（setup 语法糖）来进行用户的注册和登录。
1. 什么是 JWT？
JWT 是一种开放标准（RFC 7519），用于在网络应用环境间以 JSON 对象的形式传递安全的信息。这个信息可以被验证和信任，因为它是数字签名的。使用 JWT 可以在用户登录后，生成一个遭受保护的信息，作为后续请求的凭据。
JWT 的结构
一个典型的 JWT 是由三部分组成的字符串，格式如下：
header.payload.signature
- Header：包含令牌的类型和所使用的签名算法。
- Payload：存储要传递的数据，通常包括用户的身份信息和一些有效期信息。
- Signature：为防止数据被篡改，使用 Base64Url 编码的 header 和 payload 组合签名。
2. 相关技术栈和准备工作
本文的技术栈包括：
- Vue 3
- Vue Router
- Axios（用于发送 HTTP 请求）
- Node.js 和 Express（用于模拟后端 API）
2.1 创建项目
首先，我们需要创建一个新的 Vue 3 项目。可以使用 Vue CLI 来快速初始化：
vue create jwt-auth-demo
cd jwt-auth-demo
在安装依赖时，选择 Vue 3 和其他必要的配置。
2.2 安装 Axios
接下来，我们安装 Axios，以便进行 API 调用：
npm install axios
2.3 设定后端 API
为了处理用户的认证请求，我们需要建立一个简单的 Node.js + Express 后端。我们可以使用以下代码：
const express = require('express');
const jwt = require('jsonwebtoken');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(bodyParser.json());
const users = []; // 存储用户的数组
// 注册API
app.post('/register', (req, res) => {
const { username, password } = req.body;
users.push({ username, password });
res.status(201).send('User registered');
});
// 登录API
app.post('/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
const token = jwt.sign({ username: user.username }, 'secretKey', { expiresIn: '1h' });
return res.json({ token });
}
res.status(401).send('Invalid credentials');
});
// 启动服务器
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
在该后端代码中，我们提供了两个基本的 API 端点：/register 和 /login。用户可以通过 /register 注册账号，通过 /login 登录并获取 JWT。
3. Vue 组件实现用户认证
在 Vue 应用中，我们将创建一个非常简单的登录和注册界面。我们会在 src 目录下创建两个组件：Register.vue 和 Login.vue。
3.1 Register.vue
下面是一个完整的注册组件代码，使用 Vue 3 的 setup 语法糖实现：
<template>
<div>
<h2>Register</h2>
<form @submit.prevent="registerUser">
<label for="username">Username:</label>
<input type="text" v-model="username" required />
<label for="password">Password:</label>
<input type="password" v-model="password" required />
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
import axios from 'axios';
export default {
setup() {
const username = ref('');
const password = ref('');
const registerUser = async () => {
try {
await axios.post('http://localhost:3000/register', {
username: username.value,
password: password.value
});
alert('User registered successfully!');
} catch (error) {
console.error(error);
alert('Registration failed!');
}
};
return { username, password, registerUser };
}
};
</script>
3.2 Login.vue
接下来是登录组件：
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="loginUser">
<label for="username">Username:</label>
<input type="text" v-model="username" required />
<label for="password">Password:</label>
<input type="password" v-model="password" required />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import { ref } from 'vue';
import axios from 'axios';
export default {
setup() {
const username = ref('');
const password = ref('');
const loginUser = async () => {
try {
const response = await axios.post('http://localhost:3000/login', {
username: username.value,
password: password.value
});
localStorage.setItem('token', response.data.token); // 存储 JWT
alert('Login successful!');
} catch (error) {
console.error(error);
alert('Login failed!');
}
};
return { username, password, loginUser };
}
};
</script>
3.3 路由设置
最后，我们需要在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router';
import Register from '../components/Register.vue';
import Login from '../components/Login.vue';
const routes = [
{
path: '/register',
component: Register
},
{
path: '/login',
component: Login
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
4. 运行 Vue 应用
确保后端服务器正在运行，然后启动 Vue 应用：
npm run serve
您可以在浏览器中访问 http://localhost:8080，进行用户注册和登录。注册后，您可以使用新创建的账号进行登录，成功后会在本地存储中保存 JWT。
5. 总结
在本文中，我们使用 Vue 3 的 Composition API 和 JWT 实现了一个简单的用户认证功能。我们创建了基本的用户注册和登录功能，并展示了如何通过 Axios 进行 API 调用。随着后端的安全性增强和用户体验的改善，您还可以进一步扩展这个示例，例如，添加密码加密、JWT 刷新令牌机制等。
希望这篇文章能够帮助您理解如何在 Vue 应用中使用 JWT 进行用户认证！如果您有任何问题或建议，欢迎在评论区域交流。
更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
