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);