专栏首页Node.js开发前端请求token过期时,刷新token的处理

前端请求token过期时,刷新token的处理

在前端开发中,我们经常会遇到使用token,token的作用是要验证用户是否处于登录状态,所以要请求一些只有登录状态才能查看的资源的时候,我们需要携带token。

一般的后端接口设置的token是有时效的,超时后就会失效,失效之后的处理策略一般会做两种处理,一种是直接跳转到登录页面,重新登录。

流程图如下:

另外一种如果返回 token失效的信息,自动去刷新token,然后继续完成未完成的请求操作。

流程图如下:

但是此时我们要考虑一个问题,通常一个页面中不只是发送一个异步请求,可能会同时发送多个异步请求,下面我们用流程图来描述一下一个页面同时发送多个请求的情况,并且者多个请求都需要验证token,图示如下:

我们发现,如果出现上述情况,token会被多次刷新,除了第一次判断token失效后,进行刷新token的操作,其余的刷新token都是多余的,我们应该怎么处理呢?

首先咱们根据现实中的场景来模拟一下上面的获取token与刷新token的动作:

比如有5个人同时去买票,这里为了与是刷新token的场景类似,五个人从5个通道来买票,彼此并不知道还有其他四个人也来买票,这五个人都发现买票窗口没人,此时按照刚才的场景,可能会出现如下情况,五个人,每个人都会去呼叫叫售票员,然后完成买票,还有一种情况是,其中某一个人去叫售票员,并且会在售票窗后贴一个纸条,告诉其他几个人,售票员马上来,其他四个人只需要等待即可。

第一种场景图示如下:

这种场景会出现上面情况呢?可能会来五个售票员。。。

第二种场景图示如下:

结合买票与刷新token的场景,我们再次观察上面完成的伪代码,我么需要如下几个工具,纸条,观察者。

纸条应该是一个变量,其他用户通过这个变量来判断是否去刷新token,观察者,当售票员回来,或者token刷新完成,其他几个用户再次去完成业务逻辑。

最终的业务流程图如下:

伪代码实现如下:

const axios = require("axios");
// 封装请求
function request(url, options) {
    const token = localStorage.getItem('token');
    const defaultOptions = {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        withCredentials: true,
        url: url,
        baseURL: BASE_URL,
    };
    const newOptions = { ...options, ...defaultOptions };
    return axios.request(newOptions)
        .then(checkStatus)
        .catch(error => console.log(error));
}


// 默认纸条
let isRefreshing = true;
function checkStatus(response) {
  if (response && response.code === 1002) {
    // 刷新token的函数,这需要添加一个开关,防止重复请求
    if(isRefreshing){
        refreshTokenRequst()
    }
    isRefreshing = false;
    // 将当前的请求保存在观察者数组中
      const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(()=> {
                    resolve(request(url, options))
                })
            });
            return retryOriginalRequest;
  }else{
      return response;
  }
}


function refreshTokenRequst(){
    let data;
    const refreshToken = localStorage.getItem('refreshToken');
    data={
        authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',
        refreshToken,
    }
    axios.request({
        baseURL: BASE_URL,
        url:'/app/renewal',
        method: 'POST',
        data,
    }).then((response)=>{
        // 刷新完成后,将刷新token和refreshToken存储到本地
        localStorage.setItem('refreshToken',response.data.refreshToken);
        localStorage.setItem('token',response.data.token);
        // 并且将所有存储到观察者数组中的请求重新执行。
        onAccessTokenFetched();
        // 纸条撕掉
        isRefreshing = true;
    });
}


// 观察者
let subscribers = [];
function onAccessTokenFetched() {
    subscribers.forEach((callback)=>{
        callback();
    })
    subscribers = [];
}

function addSubscriber(callback) {
    subscribers.push(callback)
}

可以看到纸条相当于变量isRefreshing,观察者相当于数组subscribers。以上便是token失效时的处理策略

本文分享自微信公众号 - nodejs全栈开发(geekclass),作者:挥刀北上

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信JS-SDK签名接口的使用与开发

    最近诸事缠身好久没有写文章了。前不久将与微信公众号有关的一些知识点进行了梳理,微信公众号开发过程中,用最多的就是微信js-sdk了。但是使用微信js-sdk需要...

    挥刀北上
  • nginx如何配置https证书

    上一篇文章我们简单介绍了https的原理,这篇文章我们用nginx来配置一下https的证书。

    挥刀北上
  • 使用openssl创建https证书

    从今天开始笔者打算和大家聊一聊http2这个协议,想要说清楚http2协议就必须亲手搭建一个http2的服务,并且对比http2和http1.1的特点,从而了解...

    挥刀北上
  • 解决Django提交表单报错:CSRF token missing or incorrect的问题

    通常,当存在真正的跨站点请求伪造时,或者Django的CSRF机制没有被正确使用时,就会出现这种情况。至于邮递表格,你须确保:

    砸漏
  • Laravel 前后端分离项目中 Jwt-Auth + Vue 平滑刷新 Token

    Token 翻译为令牌,就是鉴别身份的凭据,类似于身份证;token 本质就是一大串字符串,最常用的场景就是接口对接的鉴权。token 通过一次登录验证,得到一...

    蓝默空间
  • Python接口自动化之接口依赖

    在上一篇Python接口自动化测试系列文章:Python接口自动化之logging封装及实战,

    ITester软件测试小栈
  • 聊聊 OAuth 2.0 的 Token 续期处理

    若上,当 前端拿着正确的(未过期且未使用过)refresh_token 去调用 认证中心的刷新 端点刷新时,会 触发RefreshTokenGranter, 返...

    冷冷
  • Python接口自动化之Token详解及应用

    在上一篇Python接口自动化测试系列文章:Python接口自动化之cookie、session应用,介绍了cookie、session原理及在自动化过程中如何...

    ITester软件测试小栈
  • JWT 身份认证优缺点分析以及常见问题解决方案

    相比于 Session 认证的方式来说,使用 token 进行身份认证主要有下面三个优势:

    Java3y
  • 基于token的多平台身份认证架构设计

    基于token的多平台身份认证架构设计 1   概述 在存在账号体系的信息系统中,对身份的鉴定是非常重要的事情。 随着移动互联网时代到来,客户端的类型越来越多,...

    用户1170933

扫码关注云+社区

领取腾讯云代金券