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

vue中token的使用与统计实践

在 Vue.js 应用中,token 通常用于身份验证和授权(如 JWT),以下是关于 token 的使用和统计用量的常见实践:

1. Token 的使用

a. 存储 Token
  • LocalStorage / SessionStorage:将 token 存储在浏览器的 localStoragesessionStorage 中。
    localStorage.setItem('token', 'your-jwt-token');
    
  • Vuex 状态管理:将 token 保存在 Vuex store 中,方便组件间共享状态。
    const store = new Vuex.Store({state: {token: localStorage.getItem('token') || null},mutations: {setToken(state, token) {state.token = token;localStorage.setItem('token', token);}}
    });
    
b. 请求携带 Token
  • 在请求拦截器中自动添加 token 到 HTTP 请求头中:
    axios.interceptors.request.use(config => {const token = store.state.token;if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;
    });
    
c. Token 过期处理
  • 解析 JWT 的 exp 字段判断是否过期:
    function isTokenExpired(token) {const payload = JSON.parse(atob(token.split('.')[1]));return Date.now() >= payload.exp * 1000;
    }
    

2. Token 使用量的统计

a. 后端统计
  • 每次用户发起请求时,后端可以记录 token 的使用次数及时间戳,并通过 API 提供统计数据。
b. 前端统计(可选)
  • 在每次发送请求时,前端也可以本地统计 token 的使用次数:
    let requestCount = 0;
    axios.interceptors.request.use(config => {requestCount++;console.log(`Token 已使用 ${requestCount}`);return config;
    });
    
c. 用户用量展示
  • 可以通过调用后端接口获取用户的 token 使用情况,并在 Vue 页面中展示:
    <template><div>本月已使用接口次数:{{ usageCount }}</div>
    </template><script>
    export default {data() {return {usageCount: 0};},mounted() {this.fetchUsage();},methods: {async fetchUsage() {const res = await axios.get('/api/user/usage');this.usageCount = res.data.count;}}
    };
    </script>
    

3. Token 安全建议

  • 避免明文传输:始终使用 HTTPS 加密通信。
  • 定期刷新 Token:配合 refresh token 实现无感刷新。
  • 清除 Token:用户登出时应清除 token:
    localStorage.removeItem('token');
    store.commit('setToken', null);
    
http://www.dtcms.com/a/272983.html

相关文章:

  • android闪光灯源码分析
  • Android 插件化实现原理详解
  • 【读书笔记】如何画好架构图:架构思维的三大底层逻辑
  • 遥感影像图像分割-地物提取模型训练与大图直接推理流程
  • 突破传统局限:60G 3D毫米波雷达如何实现精准人体全状态检测?
  • Vue3基础知识
  • 论文笔记(LLM distillation):Distilling Step-by-Step!
  • 5、Vue中使用Cesium实现交互式折线绘制详解
  • 电脑被突然重启后,再每次打开excel文件,都会记录之前的位置窗口大小,第一次无法全屏显示。
  • imx6ul Qt运行qml报错This plugin does not support createPlatformOpenGLContext!
  • 无人机抗风模块运行与技术难点分析
  • Flowable22变量监听器---------------持续更新中
  • OneFileLLM:一键聚合多源信息流
  • 股指期货交割交易日到期没平仓盈亏以哪个价格计算?
  • RP2040使用存储系统
  • 2025年7月10日泛财经要闻精选
  • ACPU正式启动全球化布局,重构AI时代的中心化算力基础施设
  • 基于cornerstone3D的dicom影像浏览器 第三十二章 文件夹做pacs服务端,fake-pacs-server
  • 专题 数字(Number)基础
  • pytorch深度学习-Lenet-Minist
  • (LeetCode 每日一题) 3440. 重新安排会议得到最多空余时间 II (贪心)
  • RabbitMQ消息队列——三个核心特性
  • LeetCode 1652. 拆炸弹
  • AI时代的接口调试与文档生成:Apipost 与 Apifox 的表现对比
  • Leetcode刷题营第十九题:对链表进行插入排序
  • Python 网络爬虫中 robots 协议使用的常见问题及解决方法
  • 图解 BFS 路径搜索:LeetCode1971
  • 芯片I/O脚先于电源脚上电会导致Latch-up(闩锁效应)吗?
  • Logback日志框架配置实战指南
  • 5种使用USB数据线将文件从安卓设备传输到电脑的方法