实现用户认证功能: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.vueLogin.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程序员研修院

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

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/yuanlong12178/article/details/143451908