当前位置：首页 > news >正文

Vue 项目登录的基本流程

news 来源：原创 2025/9/21 8:26:56

Vue 用户登录的基本流程包括以下6个步骤：

步骤：

1. 创建登录表单

在前端，首先要创建一个登录表单，用户输入账号（用户名、邮箱、手机号等）和密码。

示例：Login.vue

<template><div><form @submit.prevent="handleLogin"><div><label for="username">用户名</label><input type="text" id="username" v-model="username" placeholder="请输入用户名" /></div><div><label for="password">密码</label><input type="password" id="password" v-model="password" placeholder="请输入密码" /></div><button type="submit">登录</button></form></div>
</template><script>
export default {data() {return {username: '',password: ''};},methods: {handleLogin() {const userData = {username: this.username,password: this.password};this.$axios.post('/api/user/login', userData).then(response => {if (response.data.status === 'success') {// 登录成功，保存 token 到 localStorage 或 sessionStoragelocalStorage.setItem('authToken', response.data.token);this.$router.push('/admin');  // 跳转到管理页面} else {this.$message.error(response.data.message);  // 显示错误信息}}).catch(error => {this.$message.error('登录失败，请重试');});}}
};
</script>

2. 发送登录请求到后端

在 handleLogin 方法中，使用 axios 发送 POST 请求到后端 API /api/user/login，并携带用户输入的用户名和密码。

示例：后端登录接口（Node.js + Express）

app.post('/api/user/login', (req, res) => {const { username, password } = req.body;// 查找用户let query = '';let params = [];// 判断用户名是邮箱、电话还是普通用户名if (emailRegex.test(username)) {query = 'SELECT * FROM users WHERE email = ?';params = [username];} else if (phoneRegex.test(username)) {query = 'SELECT * FROM users WHERE phone = ?';params = [username];} else {query = 'SELECT * FROM users WHERE username = ?';params = [username];}db.query(query, params, (err, results) => {if (err) {return res.status(500).json({ message: '数据库错误' });}if (results.length === 0) {return res.status(404).json({ message: '用户不存在' });}const user = results[0];// 验证密码bcrypt.compare(password, user.password, (err, isMatch) => {if (err || !isMatch) {return res.status(401).json({ message: '密码错误' });}// 创建 JWT tokenconst token = jwt.sign({ id: user.id, username: user.username }, secretKey, { expiresIn: '1h' });res.status(200).json({status: 'success',message: '登录成功',token: token  // 将 token 返回给前端});});});
});

3. 保存 Token

在用户登录成功后，后端会返回一个 JWT（JSON Web Token）。前端接收到这个 token 后，需要将它存储到浏览器的 localStorage 或 sessionStorage 中，以便后续的请求使用。

localStorage.setItem('authToken', response.data.token);

4. 进行路由保护

登录后，前端应该根据 token 来判断用户是否已认证。在每个需要认证的路由（例如管理页面）中，使用路由守卫进行验证。

示例：路由守卫

const router = new VueRouter({routes: [{path: '/admin',component: AdminPage,beforeEnter: (to, from, next) => {const token = localStorage.getItem('authToken');if (token) {next();  // 已登录，继续访问} else {next('/login');  // 未登录，重定向到登录页}}},{path: '/login',component: LoginPage}]
});

5. 发起受保护请求

在后续的 API 请求中，前端会把保存的 token 附加到请求头部，发送给后端验证。

示例：发起受保护的 API 请求

this.$axios.get('/api/protected/resource', {headers: {Authorization: `Bearer ${localStorage.getItem('authToken')}`}
}).then(response => {console.log('Protected data:', response.data);}).catch(error => {console.error('Error:', error.response);});

6. 登出功能

用户登出时，前端需要删除存储的 token，并跳转到登录页面。

示例：登出功能

logout() {localStorage.removeItem('authToken');  // 删除 tokenthis.$router.push('/login');  // 跳转到登录页面
}

总结流程：

用户在登录页输入用户名和密码。
前端发送 POST 请求到后端，携带用户名和密码。
后端验证用户信息，生成并返回 JWT Token。
前端保存 token，并跳转到受保护页面。
在后续的 API 请求中，前端将 token 附加在请求头部。
用户登出时，删除 token 并跳转到登录页面。

Vue 项目登录的基本流程

Vue 用户登录的基本流程包括以下6个步骤： 步骤： 1. 创建登录表单在前端，首先要创建一个登录表单，用户输入账号（用户名、邮箱、手机号等）和密码。示例：Login.vue <template><div…...

编程日记 2025/9/21 8:26:56

坐井说天阔---DeepSeek-R1

前言 DeepSeek-R1这么火，虽然网上很多介绍和解读，但听人家的总不如自己去看看原论文。于是花了大概一周的时间，下班后有进入了研究生的状态---读论文。 DeepSeek这次的目标是探索在没有任何监督数据的情况下训练具有推理能力的大模型&#…...

编程日记 2025/9/19 1:51:43

Spring 是如何解决循环依赖问题的？

Spring框架通过使用三级缓存机制来解决单例Bean之间的循环依赖问题。以下是详细的解释，包括循环依赖的概念、Spring的解决方案以及三级缓存的具体作用。什么是循环依赖？ 循环依赖是指两个或多个Bean之间相互依赖，形成一个闭环。例如&#…...

编程日记 2025/9/21 8:26:55

【数据可视化-17】基于pyecharts的印度犯罪数据可视化分析

🧑 博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/9/21 8:25:30

thingboard告警信息格式美化

原始报警json内容： { "severity": "CRITICAL","acknowledged": false,"cleared": false,"assigneeId": null,"startTs": 1739801102349,"endTs": 1739801102349,"ackTs": 0,&quo…...

编程日记 2025/9/18 15:15:29

Javaweb中，使用Servlet编写简单的接口

案例：网页提交用户名和密码信息，后端校验密码长度需在6-12位之间后端部分 WebServlet("/valid") public class SimpleServlet extends HttpServlet{public void service(HttpServletRequest req, HttpServletResponse resp) throws IOExcepti…...

编程日记 2025/9/20 23:19:16

三层渗透测试-DMZ区域二三层设备区域

DMZ区域渗透信息收集首先先进行信息收集，这里我们可以选择多种的信息收集方式，例如nmap如此之类的，我的建议是，可以通过自己现有的手里小工具，例如无影，密探这种工具，进行一个信息收集。以免…...

编程日记 2025/9/12 20:37:14

Java 开发者需要了解的 PDF 基础知识

PDF 代表“可移植文档格式”（Portable Document Format），它是全球最流行的文件格式。因此，Java 开发人员很可能会经常需要处理它。然而，与 Microsoft Word 或 HTML/XML 这样的格式相比，PDF 并不那么直观。理…...

编程日记 2025/9/18 18:24:20

基于图像处理的裂缝检测与特征提取

一、引言裂缝检测是基础设施监测中至关重要的一项任务，尤其是在土木工程和建筑工程领域。随着自动化技术的发展，传统的人工巡检方法逐渐被基于图像分析的自动化检测系统所取代。通过计算机视觉和图像处理技术，能够高效、精确地提取裂缝的几何特征，如长度、宽度、方向、面…...

编程日记 2025/9/20 8:02:40

Webpack 基础入门

一、Webpack 是什么 Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中，我们的项目会包含各种类型的文件，如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像…...

编程日记 2025/9/12 20:37:07

掌握SQLite_轻量级数据库的全面指南

1. 引言 1.1 SQLite简介 SQLite 是一个嵌入式关系型数据库管理系统，它不需要单独的服务器进程或系统配置。它的设计目标是简单、高效、可靠，适用于各种应用场景，尤其是移动设备和嵌入式系统。 1.2 为什么选择SQLite 轻量级：文件大小通常在几百KB到几MB之间。无服务器架构…...

编程日记 2025/9/19 11:36:52

大数据处理如何入门

大数据处理的入门可以从以下几个方面入手： 1. 基础知识学习在深入大数据领域之前，建议先掌握一些基础知识，包括数据类型、存储与处理的基本概念，以及常用的数据处理工具。例如，Python或Java编程语言在大数据领域应用…...

编程日记 2025/9/20 2:27:56

算法与数据结构（最小栈）

题目思路为了返回栈中的最小元素，我们需要额外维护一个辅助栈 min_stack，它的作用是记录当前栈中的最小值。 min_stack的作用： min_stack的栈顶元素始终是当前栈 st 中的最小值。每当st中压入一个新元素时，如果这个元素小于等…...

编程日记 2025/9/20 20:19:00

LeetCode 1287.有序数组中出现次数超过25%的元素：遍历

【LetMeFly】1287.有序数组中出现次数超过25%的元素：遍历力扣题目链接：https://leetcode.cn/problems/element-appearing-more-than-25-in-sorted-array/ 给你一个非递减的有序整数数组，已知这个数组中恰好有一个整数，它的出…...

编程日记 2025/9/20 7:43:39

春招项目=图床+ k8s 控制台（唬人专用）

1. 春招伊始马上要春招了，一个大气的项目（冲击波项目）直观重要，虽然大家都说基础很重要，但是一个足够新颖的项目完全可以把你的简历添加一个足够闪亮的点。这就不得不推荐下我的 k8s 图床了，去年折腾快…...

编程日记 2025/9/16 9:44:03

Vue 记录用户进入页面的时间、离开页面的时间并计算时长

在 Vue 项目中，要记录用户进入页面的时间、离开页面的时间，并在用户离开时计算时长并调用后端接口，可以借助 Vue 的生命周期钩子和浏览器的一些事件来实现。以下是具体的实现步骤和示例代码： 实现思路记录进入时间：…...

编程日记 2025/9/21 4:37:28

解锁豆瓣高清海报(三)从深度爬虫到URL构造，实现极速下载

脚本地址: 项目地址: Gazer PosterBandit_v2.py 前瞻之前的 PosterBandit.py 是按照深度爬虫的思路一步步进入海报界面来爬取, 是个值得学习的思路, 但缺点是它爬取慢, 仍然容易碰到豆瓣的 418 错误, 本文也会指出彻底解决旧版 418 错误的方法并提高爬取速度. 现在我将介绍…...

编程日记 2025/9/17 16:12:30

机器学习--逻辑回归

机器学习–逻辑回归一、认知革命：从线性回归到逻辑回归 1.1 本质差异对比维度线性回归逻辑回归输出类型连续值概率值 (0-1)目标函数最小二乘法极大似然估计数学表达式 y w T x b yw^Txb ywTxb p 1 1 e − ( w T x b ) p\frac{1}{1e^{-(w^Txb)}} p1e−(wTxb…...

编程日记 2025/9/20 2:32:30

gradio创建openai前端对接deepseek等模型流式输出markdown格式文本

环境 gradio3.50.2 openai1.63.1代码 import openai import gradio as gr#导入gradio的包api_key "sk-**a8" api_base "https://api.deepseek.com/v1"import gradio as gr import openai from typing import List, Any, Iteratorclient openai.OpenAI…...

编程日记 2025/9/20 11:10:17

【LeetCode Hot100】最大子数组和｜动态规划/贪心，Java实现！图解+代码，小白也能秒懂！

💻 [LeetCode Hot100] 最大子数组和｜动态规划/贪心，Java实现！图解代码，小白也能秒懂！ ✏️本文对应题目链接：最大子数组和 📌 题目描述给定一个整数数组 nums，找到一个…...

编程日记 2025/9/19 22:44:35

【Go语言快速上手】第二部分：Go语言进阶之网络编程

文章目录前言：网络编程一、TCP/UDP 编程：net 包的使用1. TCP 编程1.1 TCP 服务器1.2 TCP 客户端 2. UDP 编程2.1 UDP 服务器2.2 UDP 客户端二、HTTP 编程：net/http 包的使用，编写 HTTP 服务器和客户端2.1 HTTP 服务器2.2 HTTP 客…...

编程日记 2025/9/16 3:26:04

AI法理学与责任归属：技术演进下的法律重构与伦理挑战

文章目录引言：智能时代的新型法律困境一、AI技术特性对传统法理的冲击1.1 算法黑箱与可解释性悖论1.2 动态学习系统的责任漂移1.3 多智能体协作的责任稀释二、AI法理学的核心争议点2.1 法律主体资格认定2.2 因果关系的技术解构2.3 过错标准的重新定义三、责任归属的实践案例分…...

编程日记 2025/9/21 2:04:10

Linux探秘坊-------8.进程详解

1.概念详解 1.运行&&阻塞&&挂起内容基础：方框中的就是调度队列，是一个双向队列，每一个元素是PCB其对应的代码数据 1.运行只要进程在调度队列中，进程的状态就是运行（running）. 2.阻塞…...

编程日记 2025/9/18 21:24:11

C#使用文件读写操作实现仙剑五前传称号存档修改

手把手教学仙剑五前传称号存档修改器首先找到 Pal5Q所在目录的save\global.sav 文件,这是一个只有488字节的文件,这里存放称号对应的编号ID,以及是否已获得该称号,1为已获取称号,0为未获取称号 [称号:是否获取]这是一个键值对称号的编号ID是一个Int32数字,使用C#的方法Bi…...

编程日记 2025/9/18 19:06:01

Kubernetes知识点总结（十）

什么是 K8s 的 namespace？ 在 K8s 中，Namespace（名字空间）提供了一种机制，将同一集群中的资源划分为相互隔离的组， 是在多个用户之间划分集群资源的一种方法。名字空间作用域仅针对带有名字空间的对…...

编程日记 2025/9/18 5:23:03

【达梦数据库】disql工具参数绑定

前言在达梦数据库的使用过程中尽管管理工具很好用，但是命令行工具还是有着得天独厚的优势，但是在参数绑定方面就没有管理工具做的更加完美，现在就汇总下disql 工具参数绑定的常用几种方式 disql 参数绑定使用 ? select * from v$dm_in…...

编程日记 2025/9/14 21:46:46

箭头函数的this指向谁

先看1个重要原则： 由Vue管理的函数，一定不要写箭头函数，箭头函数的this就不再是Vue实例了箭头函数的 this 指向在定义时确定，继承自外层作用域（即定义时的上下文）的 this，且无法通过 call、app…...

编程日记 2025/9/17 22:05:17

Node.js技术原理分析系列——Node.js调试能力分析

本文由体验技术团队屈金雄原创。 Node.js 是一个开源的、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8引擎构建的，专为高性能、高并发的网络应用而设计，广泛应用于构建服务器端应…...

编程日记 2025/9/16 4:33:09

网络基础【UDP、TCP】

1.UDP 首先我们学习UDP和TCP协议要从这三个问题入手 1.报头和有效载荷如何分离、有效载荷如何交付给上一层的协议？2.认识报头3.学习该协议周边的问题 UDP报头 UDP我们先从示意图来讲解，认识报头。 UDP协议首部有16位源端口号，16位目的端…...

编程日记 2025/9/12 20:36:27

python旅游推荐系统+爬虫+可视化（协同过滤算法）

✅️基于用户的协同过滤算法 ✅️有后台管理 ✅️2w多数据集这个旅游数据分析推荐系统采用了Python语言、Django框架、MySQL数据库、requests库进行网络爬虫开发、机器学习中的协同过滤算法、ECharts数据可视化技术，以实现从网站抓取旅游数据、个性化推荐和直观展…...

编程日记 2025/9/12 20:36:25

数据结构树的存储和遍历

一、树的定义树的定义树型结构是⼀类重要的⾮线性数据结构。 • 有⼀个特殊的结点，称为根结点，根结点没有前驱结点。 • 除根结点外，其余结点被分成M个互不相交的集合T1 、T2 、...、Tm T，其中每⼀个集合⼜是⼀棵树&#xff0c…...

编程日记 2025/9/15 22:17:57

《解锁自然语言处理：让公众正确拥抱AI语言魔法》

在当今数字化浪潮中，自然语言处理（NLP）技术作为人工智能领域的璀璨明珠，正以惊人的速度融入我们的生活。从智能语音助手到智能客服，从机器翻译到内容创作辅助，NLP技术无处不在。然而，如同任何强…...

编程日记 2025/9/15 22:02:21

qt实习总结

创建一个滑动条 QSlider *slider new QSlider(Qt::Vertical); //创建一个垂直方向的进度条带有上下箭头的输入框 QSpinBox 提供了一个带有上下箭头的输入框垂直水平怎么说 horizontal vetical 布局知识 BtnLayout->addWidget(AmendBtn); BtnLayout->addWidg…...

编程日记 2025/9/18 4:14:50

HTTP的“对话”逻辑：请求与响应如何构建数据桥梁？

一、前言作为现代互联网通信的基石，HTTP协议定义了客户端与服务器之间的“对话规则”。每一次网页加载、API调用或文件传输的背后，都离不开精心构造的HTTP请求与响应。请求中封装了用户的意图——从请求方法、资源路径到提交的数据；响应则承…...

编程日记 2025/9/18 14:43:13

Docker 镜像标签使用

写在前面当使用命令 docker pull mysql 拉取镜像时，其实等价于如下命令 docker pull mysql:latest latest 是默认的标签，字面上理解为最新版本的镜像，实质上 latest 只是镜像的标签名称，跟具体某个版本号地位一样，…...

编程日记 2025/9/13 10:13:30

C#异步/多线程编程中Task对象强大的功能介绍。

在 C# 的异步编程中，Task 是一个非常重要的类，它表示一个异步操作。Task 类提供了许多方法，用于管理、控制和组合异步操作。以下是 Task 类中一些常用方法的详细讲解及其功能。 1. Task.Run 功能：将指定的代码块调度到线程池中异步…...

编程日记 2025/9/19 13:40:59

DDD聚合在 ASP.NET Core中的实现

在ASP.NET Core中实现DDD（领域驱动设计，Domain-Driven Design）聚合通常涉及到几个关键步骤，包括定义领域模型、实现领域服务、使用仓储模式等。以下是如何在ASP.NET Core应用中实现DDD聚合的一些步骤和示例。 1. 定义领域模型首…...

编程日记 2025/9/13 10:13:25

docker push镜像到阿里云

阿里云账号阿里云-计算，为了无法计算的价值开通个人镜像容器进入控制台，试用容器实例列表界面点击上图中的个人，个人版特性创建个人版： 个人版实例界面： 设置密码个人版实例： 创建镜像仓库如上…...

编程日记 2025/9/19 15:46:02

移动通信发展史

概念解释第一代网络通信 1G 第二代网络通信 2G 第三代网络通信 3G 第四代网络通信 4G 4g网络有很高的速率和很低的延时——高到500M的上传和1G的下载日常中的4G只是用到了4G技术运营商移动-从民企到国企联通-南方教育口有人电信铁通：成立于 2000 年…...

编程日记 2025/9/13 10:13:22

Transformer笔记

Transformer笔记文章目录 Transformer笔记模型架构核心技术多头注意力机制概念数学概念单头注意力机制代码基于位置的前馈网络残差连接和层规范化编码器解码器特点：Transformer模型完全基于注意力机制，没有任何卷积层或循环神经网络。之前Transforme…...

编程日记 2025/9/15 22:48:37

【学习资源】时间序列数据分析方法（1）

时间序列数据分析是一个有趣的话题，让我们多花一些时间来研究。此篇为第一篇文章。主要介绍特征提取方法、深度学习时序数据分析模型、参考资源。期望能帮助大家解决工业领域的相关问题。 1 特征提取方法：信号处理 (来源:INTELLIGENT FAULT DIAGNOSIS A…...

编程日记 2025/9/21 5:06:40

PHP 文件与目录操作

PHP 学习资料 PHP 学习资料 PHP 学习资料在 PHP 编程中，文件与目录操作是一项基础且重要的技能。无论是处理用户上传文件、生成日志，还是管理项目中的各类资源，都离不开对文件和目录的操作。PHP 提供了丰富的内置函数，方便开发…...

编程日记 2025/9/13 10:13:16

PostgreSQL认证指南

PostgreSQL 作为一款强大的开源关系型数据库，深受开发者和企业的青睐。获得 PostgreSQL 专家认证，不仅能提升个人在数据库领域的专业能力，还能为职业发展增添有力筹码。下面为大家详细介绍 PostgreSQL 专家认证的学习路径。一、深入理解基础…...

编程日记 2025/9/20 13:59:27

hive全量迁移脚本

#!/bin/bash #场景：数据在同一库下，并且hive是内部表（前缀的hdfs地址是相同的）#1.读取一个文件，获取表名#echo "时间$dt_jian_2-------------------------" >> /home/hadoop/qianyi_zengliang/rs.txt#…...

编程日记 2025/9/13 10:13:12

Qt5开发入门指南：从零开始掌握跨平台开发

目录 Qt框架概述开发环境搭建基础语法与核心机制第一个Qt窗口程序常见问题解答一、Qt框架概述 1.1 什么是Qt？ Qt是一个1995年由挪威Trolltech公司开发的跨平台C图形用户界面应用程序框架。最新Qt5版本主要包含： GUI模块：支持Wind…...

编程日记 2025/9/13 10:13:10

WPF的Prism框架的使用

安装Prism.DryIoc库： Prism的区域和模块化： 一个区域可以显示一个用户控件一个模块就是一个项目，也就是一个类库动态切换用户控件的案例： <Grid><Grid.RowDefinitions><RowDefinition Height"auto"…...

编程日记 2025/9/18 15:07:58

【机器学习】线性回归线性回归模型的损失函数 MSE RMSE MAE R方

【机器学习系列】 KNN算法 KNN算法原理简介及要点特征归一化的重要性及方式线性回归算法线性回归与一元线性回归线性回归模型的损失函数多元线性回归多项式线性回归线性回归模型的损失函数 V1.0损失函数的计算方法损失函数的分类MSE (Mean Squared Error)RMSE (Root Mea…...

编程日记 2025/9/20 15:16:37

服务器部署DeepSeek，通过Ollama+open-webui部署

1. 安装ollama 1.1. linux 安装 Ollama是目前常用的AI模式部署的第三方工具，能一键部署deepSeek Ollama官方网址https://ollama.com/ 选择Download下载对应的服务版本服务器选择Linux，下面是下载代码 curl -fsSL https://ollama.com/install.…...

编程日记 2025/9/20 17:46:26

Java 大视界 -- 开源社区对 Java 大数据发展的推动与贡献（91）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/20 7:28:56

【Vue3源码解析】应用实例创建及页面渲染

下载源码 git clone https://github.com/vuejs/core.git写该文章时的Vue版本为： "version": "3.5.13",这里要注意 pnpm 的版本不能太低，我此时的版本为 9.15.4。更新 pnpm 版本： npm install -g pnpm然后安装依赖&…...

编程日记 2025/9/12 22:04:13

步骤：