vue中token的使用与统计实践
在 Vue.js 应用中,token 通常用于身份验证和授权(如 JWT),以下是关于 token 的使用和统计用量的常见实践:
1. Token 的使用
a. 存储 Token
- LocalStorage / SessionStorage:将 token 存储在浏览器的
localStorage
或sessionStorage
中。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);