实现用户认证功能：Vue与JWT

实现用户认证功能：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 语法糖实现：

扫描二维码关注公众号，回复： 17474148 查看本文章

<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程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作