请求时token过期自动刷新token操作

1.在开发过程中，我们都会接触到token，token的作用是什么呢？主要的作用就是为了安全，用户登陆时，服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token，证明其请求的合法性，服务器会验证token，只有通过验证才会返回请求结果。

2.当token失效时，现在的网站一般会做两种处理，一种是跳转到登陆页面让用户重新登陆获取新的token，另外一种就是当检测到请求失效时，网站自动去请求新的token，第二种方式在app保持登陆状态上面用得比较多。

3.下面进入主题，我们请求用的是axios，不管用何种请求方式，刷新token的原理都是一样的。

//封装了一个统一的请求函数，这个不是重点

export default 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));
}

// 封装了一个检测返回结果的函数，与后台返回状态码code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
 if (response && response.code === 1002) {
  // 刷新token的函数,这需要添加一个开关，防止重复请求
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  // 这个Promise函数很关键
   const retryOriginalRequest = new Promise((resolve) => {
        addSubscriber(()=> {
          resolve(request(url, options))
        })
      });
      return retryOriginalRequest;
 }else{
   return response;
 }
}

// 刷新token的请求函数

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)=>{
    localStorage.setItem('refreshToken',response.data.refreshToken);
    localStorage.setItem('token',response.data.token);
    onAccessTokenFetched();
    isRefreshing = true;
  });
}

// Promise函数集合

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

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

总结：

其实token失效，自动刷新token，在页面只有一个请求的时候是比较好处理的，但是如果页面同时有多个请求，并且都会产生token失效，这就需要一些稍微复杂的处理，解决方式主要是用了Promise 函数来进行处理。

每一个token失效的请求都会存到一个Promise函数集合里面，当刷新token的函数执行完毕后，才会批量执行这些Promise函数，返回请求结果。

还有一点要注意一下，这儿设置一个刷新token的开关isRefreshing，这个是非常有必要的，防止重复请求。

以上这篇请求时token过期自动刷新token操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于springboot+jwt实现刷新token过程解析

    前一段时间讲过了springboot+jwt的整合,但是因为一些原因(个人比较懒)并没有更新关于token的刷新问题,今天跟别人闲聊,聊到了关于业务中token的刷新方式,所以在这里我把我知道的一些点记录一下,也希望能帮到一些有需要的朋友,同时也希望给我一些建议,话不多说,上代码! 1:这种方式为在线刷新,比方说设定的token有效期为30min,那么每次访问资源时,都会在拦截器中去判断一下token是否过期,如果没有过期就刷新token的时间为30min,反之则会重新登录,需要注意的是这种方式

  • Laravel (Lumen) 解决JWT-Auth刷新token的问题

    Laravel(Lumen)中使用JWT-Auth遇到一个问题,即token如何刷新. 一开始不太理解作者的设计思想,看了很多issue之后,慢慢明白jwt-refresh如何使用. 建一个路由,比如"auth/refresh-token" ,可以指向某个方法,也可以直接写个匿名函数. $app->post('auth/refresh-token', ['middleware' => 'jwt.refresh', function() { try { $old_token

  • SpringSecurity Jwt Token 自动刷新的实现

    功能需求 最近项目中有这么一个功能,用户登录系统后,需要给 用户 颁发一个 token ,后续访问系统的请求都需要带上这个 token ,如果请求没有带上这个 token 或者 token 过期了,那么禁止访问系统.如果用户一直访问系统,那么还需要自动延长 token 的过期时间. 功能分析 1.token 的生成 使用现在比较流行的 jwt 来生成. 2.token 的自动延长 要实现 token 的自动延长,系统给用户 颁发 一个 token 无法实现,那么通过变通一个,给用户生成 2个 t

  • 请求时token过期自动刷新token操作

    1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的合法性,服务器会验证token,只有通过验证才会返回请求结果. 2.当token失效时,现在的网站一般会做两种处理,一种是跳转到登陆页面让用户重新登陆获取新的token,另外一种就是当检测到请求失效时,网站自动去请求新的token,第二种方式在app保持登陆状态上面用得比较多. 3.下面进入主题,我

  • vue实现token过期自动跳转到登录页面

    这几天项目提测,测试给我提了个bug,说token过期,路由应该自动跳转到登陆页面,让用户重新登录.先说下一些前置条件, 1:我公司的token时效在生产环境设置为一个小时,当token过期,所有接口都直接返回 2:每次路由跳转都会对token进行判断,设置了一个全局的beforeEach钩子函数,如果token存在就跳到你所需要的页面,否则 就直接跳转到登录页面,让用户登录重新存取token 接口返回的信息 { code:10009, msg:'token过期', data:null } 全局

  • Android OkHttp实现全局过期token自动刷新示例

    Android OkHttp实现全局过期token自动刷新示例

    问题 一次面试遇到的一个问题,其实也是实际开发中很容易遇到的问题,特此记录一下. 当请求某个接口的时候,我们会在请求的header中携带token消息,但是发现token失效,接口请求报错,怎么马上刷新token,然后重复请求方才那个接口呢?这个过程应该说对用户来说是无感的. 这个过程用流程图可以这样表示: 自动更新token流程 要实现上述需求的话,大家会如何实现呢? 首先讲一下Token和Cookie吧 - cookie cookie是保存在本地终端的数据.cookie由服务器生成,发送给浏

  • axios如何利用promise无痛刷新token的实现方法

    需求 最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感知. 需求解析 当用户发起一个请求时,判断token是否已过期,若已过期则先调refreshToken接口,拿到新的token后再继续执行之前的请求. 这个问题的难点在于:当同时发起多个请求,而刷新token的接口还没返回,此时其他请求该如何处理?接下来会循序渐进地分享一下整个过程. 实现思路 由于

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

  • 关于Vue 消除Token过期时刷新页面的重复提示问题

    token过期时,刷新页面,页面如果加载时向后端发起多个请求,会重复告警提示,经过处理,只提示一次告警. 1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后端返回消息提示. 2.原因分析   当前页面初始化,有多个向后端查询系统参数的调用,代码如下: created () { // ======================================

  • JWT 设置token过期时间无效的解决

    目录 JWT 设置token过期时间无效 原因 原因分析 JWT token过期自动续期解决方案 JWT token token过期刷新方案 JWT 设置token过期时间无效 原因 设置超时时间的顺序有误, 应调用setClaims()方法设置claims属性. 在调用setExpiration()方法设置超时时间. Date expiresDate = new Date(System.currentTimeMillis() + expire_time);// expire_time为toke

  • 详解ASP.NET Core Web Api之JWT刷新Token

    详解ASP.NET Core Web Api之JWT刷新Token

    前言 如题,本节我们进入JWT最后一节内容,JWT本质上就是从身份认证服务器获取访问令牌,继而对于用户后续可访问受保护资源,但是关键问题是:访问令牌的生命周期到底设置成多久呢?见过一些使用JWT的童鞋会将JWT过期时间设置成很长,有的几个小时,有的一天,有的甚至一个月,这么做当然存在问题,如果被恶意获得访问令牌,那么可在整个生命周期中使用访问令牌,也就是说存在冒充用户身份,此时身份认证服务器当然也就是始终信任该冒牌访问令牌,若要使得冒牌访问令牌无效,唯一的方案则是修改密钥,但是如果我们这么做了,

  • 无感知刷新Token示例简析

    目录 引言 Token认证的原理 什么是无感知刷新Token 实现步骤 步骤一:获取Access Token和Refresh Token 步骤二:在请求中携带Access Token 步骤三:拦截401 Unauthorized响应 步骤四:服务器处理Refresh Token请求 步骤五:设置定时刷新Token 安全性考虑 引言 在前后端分离的应用中,使用Token进行认证是一种较为常见的方式.但是,由于Token的有效期限制,需要不断刷新Token,否则会导致用户认证失败.为了解决这个问题,

  • koa+jwt实现token验证与刷新功能

    JWT JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信任,因为它是数字签名的. 本文只讲Koa2 + jwt的使用,不了解JWT的话请到这里)进行了解. koa环境 要使用koa2+jwt需要先有个koa的空环境,搭环境比较麻烦,我直接使用koa起手式,这是我使用koa+typescript搭建的空环境,如果你也经常用koa写写小demo,可以点个star,方便~ 安

随机推荐