React-umi-request动态刷新Token功能实现及node.js 代码逻辑

有情饮水饱 發表於 2019-11-14 12:19:00

React-umi-request动态刷新Token功能实现及node.js 代码逻辑

在Antd-pro里面，使用的是umi-request,为了实现动态刷新token,我使用了拦截器。
拦截器更新token有两种：
方法一：在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。
<ul>
<li>优点：在请求前拦截，能节省请求，省流量。</li>
<li>缺点：需要后端额外提供一个token过期时间的字段 refreshTime ；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。</li>
</ul>
方法二：拦截返回后的数据。先发起请求，接口返回过期后，先刷新token，再进行一次重试。
<ul>
<li>优点：不需额外的token过期字段，不需判断时间。</li>
<li>缺点：会消耗多一次请求，耗流量。</li>
</ul>
综上考虑，方法一和二优缺点是互补的，方法一有校验失败的风险（本地时间被篡改时，当然一般没有用户闲的蛋疼去改本地时间的啦），方法二更简单粗暴，等知道服务器已经过期了再重试一次，只是会耗多一个请求。
我看有的博主用了方法二，我个人更喜欢方法一，（原因就是有的请求要求并发，for循环，一次出去10个请求，所以嘛。。。）
下面是实现过程
<div class="cnblogs_code">
<pre>/**
* request 网络请求工具
* 更详细的 api 文档: https://github.com/umijs/umi-request
*/
import { extend } from 'umi-request';
import { notification } from 'antd';
import { routerRedux } from 'dva/router';
import { getUserToken, saveUserToken, clearAuthority } from './authority';
import jwt_decode from 'jwt-decode'
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队（异步任务）。',
204: '删除数据成功。',
400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
401: '用户没有权限（令牌、用户名、密码错误）。',
403: '用户得到授权，但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除，且不会再得到的。',
422: '当创建一个对象时，发生一个验证错误。',
500: '服务器发生错误，请检查服务器。',
502: '网关错误。',
503: '服务不可用，服务器暂时过载或维护。',
504: '网关超时。',
};
/**
* 异常处理程序
*/

const errorHandler = error => {
const { response } = error;

if (response && response.status) {
const errorText = codeMessage || response.statusText;
const { status, url } = response;
notification.error({
 message: `请求错误 ${status}: ${url}`,
 description: errorText,
});
} else if (!response) {
notification.error({
 description: '您的网络发生异常，无法连接服务器',
 message: '网络异常',
});
}

return response;
};
/**
* 配置request请求时的默认参数
*/

const request = extend({
errorHandler,
// 默认错误处理
credentials: 'include', // 默认请求是否带上cookie
});

let _cacheRequest = [];
let guoqi = true;
let ispending = false;
request.interceptors.request.use(async (url, options) => {

const token = getUserToken();
if( token ){
 //如果有token 就走token逻辑
 const headers = {
 Authorization: `Bearer ${token}`,
 };
 //如果是刷新token接口，就直接过，不要拦截它！！！
 if( url === '/weiqinketop/api/account/login/getnewtoken'){
 return ({
 url: url,
 options: { ...options, headers: headers },
 });
 }
 let decodeToken = jwt_decode(token);
 const { iat, exp, refreshTime } = decodeToken;
 const maxTime = exp*1000+refreshTime;
 const nowTime = new Date().getTime();
 console.log( parseInt((maxTime - nowTime)/1000) +'秒后重新登录')
 if( nowTime >= maxTime){
 //token过期，而且延期token也过去了，那么，清空你的数据，直接返回登录，不允许操作了
 console.log('超时了')
 clearAuthority()
 location.href = '/user/login'
 return;
 }
 console.log( parseInt((exp*1000 - nowTime)/1000) + '秒后第一个过期' )
 if( nowTime >= exp*1000 ){
 //只是过期了，那就去拿新的token
 if( ispending ){
 //如果正在发送中，此请求就等一会吧，生成一个Promise 等新token返回的时候，我再resolve
 }else{
 //如果没发送，立刻改为发送状态
 ispending = true;
 //如果过期了还没请求新token,那就请求新token 记得带上旧token
 request('/weiqinketop/api/account/login/getnewtoken',{
 method: 'POST',
 data:{}
 }).then((res)=>{
 if( res.status === 200 ){
 ispending = false;
 let token = res.token;
 saveUserToken( token )
 _cacheRequest.map(cb => cb())
 }
 })

 }
 return new Promise((resolve, reject) => {
 _cacheRequest.push(() => {
 resolve()
 })
 });
 }
 return ({
 url: url,
 options: { ...options, headers: headers },
 });
}
return ({
 url: url,
 options: options,
});
})
//第二个拦截器，为什么会存在第二个拦截器呢？就是因为第一个拦截器有可能返回Promise,那么Promise由第二个拦截器处理吧。之前因为这个问题跟umi提了issues。原来是我没搞明白。。。
request.interceptors.request.use(async (url, options) => {
const token = getUserToken();
if( token ){
 //如果有token 就走token逻辑
 const headers = {
 Authorization: `Bearer ${token}`,
 };
 return ({
 url: url,
 options: { ...options, headers: headers },
 });
}
return ({
 url: url,
 options: options,
});

})
export default request;</pre>
</div>
说下中途遇到的问题吧，原本只有第一个拦截器，返回Promise，总是会造成请求二次重发，我后来请教官方，得知 resolve( request( url, options) ) 导致的重发请求，现在已经进行了修复，可以正常使用了，后台使用的node.js KOA，下面贴下代码吧
<div class="cnblogs_code">
<pre>/**** Token功能类 ****/
const jwt = require('jsonwebtoken');
/**** secret编码 ****/
const secret = '002c6';
/*****
* 过期时间延长24小时
*/
// const refreshTime = 86400000;
/*****
* 过期时间延长10s
*/
const refreshTime = 10000;

class Token{
constructor() {
 this.jwt = jwt;
 this.secret = secret;
}
/*******生成的格式就是{alg: "HS256",typ: "JWT"}.{name: "你的名字字段",refreshTime: 10000,iat: 1573704935,exp: 1573704947. */
createToken( payload , dateStr ){
 payload.refreshTime = refreshTime;
 return this.jwt.sign(payload, this.secret, { expiresIn: dateStr });
}
}

// module.exports = {
// proToken : new Token()
// }

exports.proToken = new Token()</pre>
</div>
  
来源：https://www.cnblogs.com/qkstart/p/11856168.html

頁: [1]

琼殿技术论坛's Archiver

React-umi-request动态刷新Token功能实现及node.js 代码逻辑