在 Vue 项目中，登录成功后是否存储 token 与用户信息到本地
答案：不安全
举例：直接使用localStorage存储，本地存储可能会被 XSS 攻击窃取
localStorage.setItem('token', response.token)localStorage.setItem('userInfo', JSON.stringify({username: response.username,email: response.email}))推荐方案：
// 登录成功后的存储策略
const handleLoginSuccess = (response) => {// 1. 使用localStorage存储token（长期有效）localStorage.setItem('token', response.token);// 2. 使用sessionStorage存储敏感信息（会话级）sessionStorage.setItem('userRole', response.role);// 3. 状态管理（推荐Pinia）store.user.setToken(response.token);store.user.setUserInfo(response.user);// 4. 路由跳转router.push(redirectPath);
}技术实现建议：
-
分层存储策略
- localStorage：存储 token（长期有效）
- sessionStorage：存储敏感信息（会话级）
- Pinia：存储当前用户状态（响应式）
-
安全增强措施
// 存储时增加加密处理
const encryptedToken = CryptoJS.AES.encrypt(response.token,import.meta.env.VITE_ENCRYPT_KEY
).toString();
localStorage.setItem('secureToken', encryptedToken);-
自动续期机制
// 检查token有效期
const checkTokenExpiration = () => {const expires = localStorage.getItem('tokenExpires');if(Date.now() >= expires) {refreshToken(); // 自动刷新token}
}最佳实践：
1、使用 localStorage 存储 token，但需配合以下措施：
- 前端加密存储
- 限制 token 作用域
- 设置合理过期时间
token添加域名前缀，防止不同域名之间的数据冲突，同时避免XSS攻击
const tokenKey = 'auth_token_' + window.location.hostnameconst userKey = 'user_data_' + window.location.hostname设置token过期时间为24hour
// 设置token，添加过期时间const tokenData = {token: response.token,expires: Date.now() + 24 * 60 * 60 * 1000 // 24小时后过期}sessionStorage.setItem(tokenKey, JSON.stringify(tokenData))只存必要的用户信息，并进行简单加密
// 只存储必要的用户信息，并进行简单加密const userData = {username: response.username,email: response.email,lastLogin: Date.now()}sessionStorage.setItem(userKey, JSON.stringify(userData))2、敏感信息（如用户角色）使用 sessionStorage 存储
3、所有 API 请求携带 token（请求拦截器）
// axios拦截器示例
axios.interceptors.request.use(config => {const token = localStorage.getItem('token');if(token) {config.headers.Authorization = `Bearer ${token}`;}return config;
});4、路由守卫验证
// router守卫示例
router.beforeEach((to, from, next) => {const token = store.user.token;if(to.meta.requiresAuth && !token) {next('/login?redirect=' + to.fullPath);} else {next();}
});
相关文章：
在 Vue 项目中，登录成功后是否存储 token 与用户信息到本地
答案：不安全 举例：直接使用localStorage存储，本地存储可能会被 XSS 攻击窃取 localStorage.setItem(token, response.token)localStorage.setItem(userInfo, JSON.stringify({username: response.username,email: response.email})) 推荐方…...
【加密社】做一个展示币种价格的组件
具体的代码是以下,可以看到 <div id"crypto-price-widget"><p class"loading">Loading cryptocurrency prices... <span class"spinner"></span></p> </div><script> document.addEventListener(DOM…...
CANoe入门——CANoe的诊断模块，调用CAPL进行uds诊断
目录 一、诊断窗口介绍 二、诊断数据库文件管理 三、添加基础诊断描述文件（若没有CDD/ODX/PDX文件）并使用对应的诊断功能进行UDS诊断 3.1、添加基础诊断描述文件 3.2、基于基础诊断，使用诊断控制台进行UDS诊断 3.2.1、生成基础诊断 3.…...
AI日报 - 2025年3月30日
🌟 今日概览（60秒速览） ▎🤖 模型进展 | Qwen2.5-Omni多模态实时交互，Gemini 2.5 Pro/GPT-4o低调升级，Claude内部思考过程揭秘。 新模型和升级持续涌现，多模态与内部机制理解成焦点。 ▎&#x…...
)
蓝桥刷题note11(好数)
1，好数 一个整数如果按从低位到高位的顺序，奇数位 (个位、百位、万位 ⋯⋯ ) 上的数字是奇数，偶数位 (十位、千位、十万位 ⋯⋯ ) 上的数字是偶数，我们就称之为 “好数”。 给定一个正整数 NN，请计算从 1 到 NN 一共…...
Go常用的设计模式
Go常用的设计模式 常见的设计模式，如 单例模式、工厂模式、策略模式、观察者模式、代理模式、装饰器模式 和 适配器模式 都可以在 Go 中实现，适用于不同的开发需求。 这些设计模式不仅能帮助你编写结构清晰、可维护的代码，还能让你更好地应…...
复现文献中的三维重建图像生成，包括训练、推理和可视化
要复现《One - 2 - 3 - 45 Fast Single Image to 3D Objects with Consistent Multi - View Generation and 3D Diffusion (CVPR)2024》文献中的三维重建图像生成，包括训练、推理和可视化，并且确保代码能正常运行，下面是基本的实现步骤和示例…...
day17 学习笔记
文章目录 前言一、数组的增删改查1.resize函数2.append函数3.insert函数4.delete函数5.argwhere函数6.unique函数 二、统计函数1.amax，amin函数2.ptp函数3.median函数4.mean函数5.average函数6.var，std函数 前言 通过今天的学习，我掌握了num…...
Mysql练习题
先创建对应数据表 #先创建表 #学生表 Student create table Student(SId varchar(10),Sname varchar(10),Sage datetime,Ssex varchar(10)); insert into Student values(01 , 赵雷 , 1990-01-01 , 男); insert into Student values(02 , 钱电 , 1990-12-21 , 男); insert int…...
torch不能使用cuda的解决方案
遇到了这样的报错，说明 torch不能使用cuda 反思 我频繁地尝试安装不同的 nvdia 驱动，浪费了很多时间。因为我的错误地认为nvidia会自带cuda，其实cuda需要单独安装。 还有我的torch是cpu版本的，即使nvidia cuda安装了࿰…...
Python 循环全解析：从语法到实战的进阶之路
一、问答题 （1）下面的循环体被重复了多少次?每次循环的输出结果是什么? i1 while i < 10:if i % 2 0:print(i)死循环，没有输出结果 i1 while i < 10:if i % 2 0:print(i)i l死循环，没有输出结果 i 1 while i< 10…...
代码随想录算法训练营--打卡day3
复习：标注感叹号的需要在电脑上重新做几遍 一.两两交换链表中的节点！！ 1.题目链接 24. 两两交换链表中的节点 - 力扣（LeetCode） 2.思路 画图 3.代码 class Solution {public ListNode swapPairs(ListNode head) …...
ubuntu 安装mysql
在 Ubuntu 系统中安装 MySQL 的步骤如下： 步骤 1：更新软件包列表 sudo apt update步骤 2：安装 MySQL 服务器 sudo apt install mysql-server -yUbuntu 22.04/20.04 默认安装 MySQL 8.0，早期版本可能默认使用 MariaDB。 如果需要…...
用Python实现资本资产定价模型（CAPM）
使用 Python 计算资本资产定价模型（CAPM）并获取贝塔系数（β）。 步骤 1：导入必要的库 import pandas as pd import yfinance as yf import statsmodels.api as sm import matplotlib.pyplot as plt 步骤 2࿱…...
Conda配置Python环境
1. 安装 Conda 选择发行版： Anaconda：适合需要预装大量科学计算包的用户（体积较大）。 Miniconda：轻量版，仅包含 Conda 和 Python（推荐自行安装所需包）。 验证安装： co…...
Redisson延迟队列实战：分布式系统中的“时间管理者“
目录 引言：延迟队列的魅力与应用 什么是Redisson延迟队列？ 技术原理与工作机制 应用场景 环境准备：搭建基础 Maven依赖配置 Redisson客户端配置 延迟队列实现：核心代码 工作原理深度解析 数据模型与存储结构 元素流转过…...
国产化适配 - YashanDB、达梦数据库与MySQL 的兼容性及技术选型对比分析
根据知识库信息，以下是 YashanDB、达梦数据库与MySQL 的兼容性及技术选型对比分析： 1. YashanDB 与 MySQL 兼容性 协议与语法兼容 ： YashanDB 100%兼容 MySQL 5.7协议 的常用命令（如 SELECT、INSERT），但…...
从0开始——在PlatformIO下开展STM32单片机的HAL库函数编程指南
目录 前言 编写时钟初始化 实现Systicks_Handler，完成HAL库的时基更新 编写驱动测试 前言 笔者最开始的尝试是在2025年的寒假，准备向PlatformIO迁移HAL库，注意，截止到目前，PlatformIO对HAL库的支持已经非常完善了。…...
Python小练习系列 Vol.9：杨辉三角生成（数组构建 + 数学组合）
🧠 Python小练习系列 Vol.9：杨辉三角生成（数组构建 数学组合） 🔺 本期我们带来一道简洁却优雅的经典练习 —— 生成杨辉三角，是训练数组操作与组合思想的绝佳题目！ 🧩 一、题目描述…...
Webview详解（下）
第三阶段：性能优化 加载速度优化 缓存策略 缓存策略可以显著减少网络请求，提升页面加载速度。常用的缓存策略包括 HTTP 缓存和本地资源预加载。 1. HTTP 缓存 HTTP 缓存利用 HTTP 协议中的缓存机制（如 Cache-Control、ETag 等࿰…...
scss基础用法
SCSS（Sassy CSS）是Sass的增强版本，作为CSS的预处理器，它提供了多种功能来提高代码的可维护性和效率。以下是SCSS的基础用法： 变量（Variables） 用于存储常用的值，如颜色、字体大小等。…...
知能行每日综测
题目1 自己的做法 答案 题目2 自己的 答案 题目3 注意：这道做错了，你们可以看看我哪里错了 题目4 我的 答案 题目5 没思路，不会做 已更改 题目6 答案 第七题 我的 不会 现在补综测最后一个...
c++ vs和g++下的string结构
话不多说进入正题.注:下述结构是在32位平台下进行验证，32位平台下指针占4个字节. vs下string的结构 string总共占28个字节，内部结构稍微复杂一点，先是有一个联合体，联合体用来定义 string中字符串的存储空间：(联合体的…...
海量数据处理
1.海量数据处理问题 给两个文件，分别有100亿个query，只有1G内存，如何找到两个文件交集？ 解决方案一： 可以先用布隆过滤器，一个文件的query放进布隆过滤器，另一个文件依次查找，在的…...
洛谷题单1-P5706 【深基2.例8】再分肥宅水-python-流程图重构
题目描述 现在有 t t t 毫升肥宅快乐水，要均分给 n n n 名同学。每名同学需要 2 2 2 个杯子。现在想知道每名同学可以获得多少毫升饮料（严格精确到小数点后 3 3 3 位），以及一共需要多少个杯子。 输入格式 输入一个实数 t …...
【HarmonyOS 5】初学者如何高效的学习鸿蒙？
【HarmonyOS 5】初学者如何高效的学习鸿蒙？ 一、前言 在全球科技格局风云变幻的当下，谷歌安卓系统的管控逐步收紧，加之国际形势愈发复杂，打造中国人自主的操作系统，已成为时代发展的必然要求，这不仅是突破…...
Java NIO之FileChannel 详解
关键点说明 文件打开选项： StandardOpenOption.CREATE - 文件不存在时创建 StandardOpenOption.READ/WRITE - 读写权限 StandardOpenOption.APPEND - 追加模式 StandardOpenOption.TRUNCATE_EXISTING - 清空已存在文件 缓冲区操作： ByteBuffer.wrap…...
数据可视化（matplotlib）-------图表样式美化
目录 一、图表样式概述 （一）、默认图表样式 （二）、图表样式修改 1、局部修改 2、全局修改 二、使用颜色 （一）、使用基础颜色 1、单词缩写或单词表示的颜色 2、十六进制/HTML模式表示的颜色 3、RGB…...
Go 语言中，关于客户端初始化的最佳实践
在 Go 语言中，关于客户端初始化的最佳实践确实需要注意以下几点： 全局单例模式是推荐做法，尤其对于需要保持长连接或需要复用资源的客户端（如数据库、Redis、HTTP 客户端等）并发安全是必须保证的，需要确保…...
MyBatis的第一天笔记
1. MyBatis 概述 1.1 什么是框架 框架是对通用代码的封装，提前写好了一堆接口和类，可以直接引入使用框架一般以jar包形式存在Java常用框架：SSM三大框架（Spring SpringMVC MyBatis）、SpringBoot、SpringCloud等 1.…...
区块链赋能，为木材货场 “智” 造未来
区块链赋能，为木材货场 “智” 造未来 在当今数字化浪潮席卷的时代，软件开发公司不断探索创新，为各行业带来高效、智能的解决方案。今天，让我们聚焦于一家软件开发公司的杰出成果 —— 区块链木材货场服务平台，深入了…...
IvorySQL：兼容Oracle数据库的开源PostgreSQL
今天给大家介绍一款基于 PostgreSQL 开发、兼容 Oracle 数据库的国产开源关系型数据库管理系统：IvorySQL。 IvorySQL 由商瀚高软件提供支持，主要的功能特性包括： 完全兼容 PostgreSQL：IvorySQL 基于 PostgreSQL 内核开发…...
)
Python 序列构成的数组(切片)
切片 在 Python 里，像列表（list）、元组（tuple）和字符串（str）这类 序列类型都支持切片操作，但是实际上切片操作比人们所想象的要强大 很多。 这一节主要讨论的是这些高级切片形式的…...
Pre-flash和Main flash
在相机拍照过程中，Pre-flash（预闪光） 和 Main flash（主闪光） 是常见的两种闪光灯使用模式，通常用于提高低光环境下的拍摄质量，尤其在自动曝光（AE）和自动对焦（…...
【区块链安全 | 第十篇】智能合约概述
部分内容与前文互补。 文章目录 一个简单的智能合约子货币（Subcurrency）示例区块链基础交易区块预编译合约 一个简单的智能合约 我们从一个基础示例开始，该示例用于设置变量的值，并允许其他合约访问它。 // SPDX-License-Identi…...
判断质数及其优化方法
判断质数（素数）及其优化方法 质数是指 大于1的自然数，且 只有1和它本身两个正约数。以下是几种判断方法及其优化策略。 目录 基础方法（试除法）优化1：仅检查到√n优化2：跳过偶数优化3ÿ…...
【源码阅读/Vue Flask前后端】简历数据查询功能
目录 一、Flask后端部分modelServiceroute 二、Vue前端部分index.js main.vue功能界面templatescriptstyle 一般就是三个层面，model层面用来建立数据库的字段，service用来对model进行操作，写一些数据库操作的代码，route就是具体的…...
R语言对偏态换数据进行转换（对数、平方根、立方根）
我们进行研究的时候经常会遇见偏态数据，数据转换是统计分析和数据预处理中的一项基本技术。使用 R 时，了解如何正确转换数据有助于满足统计假设、标准化分布并提高分析的准确性。在 R 中实现和可视化最常见的数据转换：对数、平方根和立方根转…...
链表（C++）
这是本人第二次学习链表，第一次学习链表是在大一上的C语言课上，首次接触，感到有些难；第二次是在大一下学习数据结构时（就是这次），使用C再次理解链表。同时，这也是开启数据结构学习写…...
算法-前缀和与差分
一、前缀和（Prefix Sum） 1. 核心思想 前缀和是一种预处理数组的方法，通过预先计算并存储数组的前缀和，使得后续的区间和查询可以在**O(1)**时间内完成。 2. 定义 给定数组 nums，前缀和数组 prefixSum 的每个元素 p…...
网关接口超时？用Java实现接口快速返回，后台继续执行的方法
网关接口超时？用Java实现接口快速返回，后台继续执行的方法 在开发过程中，我们经常会遇到网关接口由于超时限制而导致请求失败的情况。然而，有些接口本身就需要较长时间来执行任务，这时我们不能简单地增加超时时间&…...
HTTP---基础知识
天天开心！！！ 文章目录 一、HTTP基本概念1. 什么是HTTP，又有什么用？2. 一次HTTP请求的过程3.HTTP的协议头4.POST和GET的区别5. HTTP状态码6.HTTP的优缺点 二、HTTP的版本演进1.各个版本的应用场景2、注意要点 三、HTTP与…...
python基础学习三（元组及字符串的使用）
文章目录 元组什么是元组元组的创建方式为什么要将元组设计成不可变序列元组的遍历集合集合的相关操作集合操作集合的数学操作集合生成式列表，字典，元组，集合总结 字符串字符串的驻留机制判断字符串的操作方法字符串的比较操作字符串的切片操…...
c#winform，倒鸭子字幕效果，typemonkey字幕效果，抖音瀑布流字幕效果
不废话 直接上效果图 C# winform 开发抖音的瀑布流字幕。 也是typemonkey插件字幕效果 或者咱再网上常说的倒鸭子字幕效果 主要功能 1，软件可以自定义添加字幕内容 2，软件可以添加字幕显示的时间区间 3，可以自定义字幕颜色，可以随…...
串口实验)
1、C51单片机(STC8G2K64S4)串口实验
一、串口1接线图 1、下面是单片机外接电路图，P30,P31分别用于RXD和TXD功能引脚 2、我们来查看单片机手册 串口1需要设置的寄存器 串口1的功能脚配置选择位，看电路图选择的是P3.0,P3.1。 3、串口1：SCON控制寄存器 设置为0x50:0101 0000。&a…...
ue材质学习感想总结笔记
2025 - 3 - 27 1.1 加法 对TexCoord上的每一个像素加上一个值，如果加上0.1，0.1， 那么左上角原来0,0的位置变成了0.1,0.1 右上角就变成了1.1,1.1，那么原来0,0的位置就去到了左上角左上边，所以图像往左上偏移。 总而言…...
MFC TRACE 宏的使用说明
书籍：《Visual C 2017从入门到精通》的2.7 字符串 环境：visual studio 2022 内容：几个字符串类型->（将单字节char*转换为宽字节wchar_t *）（将宽字节wchar_t* 转换为单字节char *） 问题&am…...
latex笔记
1、基本结构 \documentclass[a4paper, 12pt]{article} %文档类型 \begin{document}\title{My First Document}\author{My Name}\date{\today}\maketitleA sentence of text. \end{document}2、带有章、节、小节的结构 \documentclass[a4paper, 12pt]{article}\begin{document…...
 —[Attribute]特性)
Unity编辑器功能及拓展(3) —[Attribute]特性
在 Unity 中，[Attribute]格式的特性是用于扩展编辑器功能、控制序列化行为和调整 Inspector 显示,进行编辑器拓展的核心工具。 一.基础编辑器拓展 1.基础序列化控制 1.[SerializeField] 强制显示私有变量到Inspector 2.[HideInInspector] 隐藏该字段在Inspect…...
Rust基础语法
以下是 Rust 语言基础语法的核心要点，结合与 JavaScript 的对比，帮助前端开发者快速掌握核心概念： 一、变量与常量 1. 变量声明 Rust：变量默认不可变，需用 mut 显式声明可变性。let x 5; // 不可变变量 le…...