解决无效token的方法

解决无效token的方法

在调用API接口时遇到了无效token的问题,网上搜了一大圈还以为是token时效的问题,最后发现是给需要授权的 API ,必须在请求头中使用Authorization 字段提供 token 令牌。
关于Authorization(授权)的解释:

用户授予第三方应用访问该用户某些资源的权限

  • 你在安装手机应用的时候,APP 会询问是否允许授予权限(访问相册、地理位置等权限)

  • 你在访问微信小程序时,当登录时,小程序会询问是否允许授予权限(获取昵称、头像、地区、性别等个人信息)

实现授权的方式有:cookie、session、token、OAuth

在这里插入图片描述
需要在main.js文件里添加axios拦截器

axios.interceptors.request.use(config => {
  console.log(config);
  config.headers.Authorization = window.sessionStorage.getItem('token');
  // 在最后必须return 
  return config
})

然后在请求头中可以发现Authorization的值还是Null,原因就是当你发送的发出的是登录请求,在登录期间服务器没有给你token,如果登录之后调用其他接口再去监听这次请求的话就会发现Authorization的值不在是null了,而是登录后的token。根据授权(Authorization)的解释,之所以要这么做的原因就是要给token授权访问api接口的权限。
在这里插入图片描述
在这里插入图片描述

### 处理 Axios 请求中的无效 Token 错误 为了有效处理 Axios 请求过程中可能出现的无效 Token 问题,可以采用请求和响应拦截器来实现自动刷新 Token 的机制。具体方法如下: #### 使用请求拦截器添加 Token 在 `main.js` 文件中设置请求拦截器,在每次发出 HTTP 请求前自动附加当前有效的 Token。 ```javascript import axios from 'axios'; // 添加请求拦截器 axios.interceptors.request.use( function(config) { // 如果存在 token,则将其加入请求头 const token = sessionStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, function(error) { return Promise.reject(error); } )[^1]; ``` #### 实现 Token 刷新逻辑 对于可能因过期而失效的 Tokens,可以在响应拦截器内捕获特定状态码(通常是401未授权),并尝试调用 API 接口获取新的 Access Token 或 Refresh Token。 ```javascript let isRefreshing = false; // 防止多次触发刷新操作 let failedQueue = []; // 存储失败重试队列 axios.interceptors.response.use(undefined, async error => { const originalRequest = error.config; if (error.response.status === 401 && !originalRequest._retry) { if(isRefreshing){ return new Promise((resolve,reject)=>{ failedQueue.push({ resolve, reject }); }) } originalRequest._retry = true; isRefreshing = true; try{ await refreshAccessToken(); // 自定义函数用于向服务器申请新令牌 failedQueue.forEach(cb=>cb.resolve()); failedQueue=[]; return axios(originalRequest); }catch(err){ failedQueue.forEach(cb=>cb.reject(err)); failedQueue=[]; throw err; }finally{ isRefreshing=false; } } return Promise.reject(error); }); ``` 上述代码片段展示了如何利用 Axios 提供的拦截功能构建一个健壮的 Token 管理方案[^3]。每当检测到由于 Token 过期导致的身份验证失败时,会立即启动一次异步流程去更新用户的访问凭证,并确保所有等待执行的任务能够继续正常运行而不必担心再次遭遇同样的权限问题。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值