如何实现无感刷新token

目录
  • 1、需求
    • 方法一
    • 方法二
    • 方法三
  • 2、实现
  • 3、问题解决
    • 问题一:如何防止多次刷新token
    • 问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决

前言:

最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁的要去登录。

前端:后端,你能不能把token 过期时间设置的长一点。

后端:可以,但是那样做不安全,你可以用更好的方法。

前端:什么方法?

后端:给你刷新token的接口,定时去刷新token

前端:好,让我思考一下

1、需求

token过期的时候,刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知,避免频繁登录。实现思路

方法一

后端返回过期时间,前端判断token过期时间,去调用刷新token接口

缺点:需要后端额外提供一个token过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败。

方法二

写个定时器,定时刷新token接口

缺点:浪费资源,消耗性能,不建议采用。

方法三

在响应拦截器中拦截,判断token 返回过期后,调用刷新token接口

2、实现

axios的基本骨架,利用service.interceptors.response进行拦截

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        })
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  })

3、问题解决

问题一:如何防止多次刷新token

我们通过一个变量isRefreshing 去控制是否在刷新token的状态。

import axios from 'axios'

service.interceptors.response.use(
  response => {
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          setToken(token)
          response.headers.Authorization = `${token}`
        }).catch(err => {
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  })

问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决

当第二个过期的请求进来,token正在刷新,我们先将这个请求存到一个数组队列中,想办法让这个请求处于等待中,一直等到刷新token后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢?为了解决这个问题,我们得借助Promise。将请求存进队列中后,同时返回一个Promise,让这个Promise一直处于Pending状态(即不调用resolve),此时这个请求就会一直等啊等,只要我们不执行resolve,这个请求就会一直在等待。当刷新请求的接口返回来后,我们再调用resolve,逐个重试。

最终代码:

import axios from 'axios'

// 是否正在刷新的标记
let isRefreshing = false
//重试队列
let requests = []
service.interceptors.response.use(
  response => {
  //约定code 409 token 过期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        //调用刷新token的接口
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          // 替换token
          setToken(token)
          response.headers.Authorization = `${token}`
           // token 刷新后将数组的方法重新执行
          requests.forEach((cb) => cb(token))
          requests = [] // 重新请求完清空
          return service(response.config)
        }).catch(err => {
        //跳到登录页
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数形式将 resolve 存入,等待刷新后再执行
          requests.push(token => {
            response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)

到此这篇关于如何实现无感刷新token的文章就介绍到这了,更多相关实现无感刷新token内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

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

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

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

  • SpringSecurity Jwt Token 自动刷新的实现

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

  • 详解uniapp无痛刷新token方法

    前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token 大概流程如下: 1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage 平时请求数据时,请求头使用accessToken 来发送接口 2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为refreshToken 3.我们拿到新的accessToken 和refreshTok

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

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

  • vue下axios拦截器token刷新机制的实例代码

    //创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSubscribers = []; //判断token是否过期 function isToken

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

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

  • SpringBoot JWT实现token登录刷新功能

    目录 1. 什么是JWT 2. JWT组成部分 3. JWT加密方式 4.实战 5.总结 1. 什么是JWT Json web token (JWT) 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准.简答理解就是一个身份凭证,用于服务识别. JWT本身是无状态的,这点有别于传统的session,不在服务端存储凭证.这种特性使其在分布式场景,更便于扩展使用. 2. JWT组成部分 JWT有三部分组成,头部(header),载荷(payload),是签名(signature). 头

  • 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

  • 如何实现无感刷新token

    目录 1.需求 方法一 方法二 方法三 2.实现 3.问题解决 问题一:如何防止多次刷新token 问题二:同时发起两个或者两个以上的请求时,其他接口怎么解决 前言: 最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁的要去登录. 前端:后端,你能不能把token 过期时间设置的长一点. 后端:可以,但是那样做不安全,你可以用更好的方法. 前端:什么方法? 后端:给你刷新token的接口,定时去刷新token 前端:好,让我思考一下 1.需求 当

  • GoLang jwt无感刷新与SSO单点登录限制解除方法详解

    目录 前言 为什么使用JWT Cookie和Session token (header.payload.signature) token 安全性 基于token安全性的处理 客户端与服务端基于无感刷新流程图 golang实现atoken和rtoken 颁发token 校验token 无感刷新token 完整实现代码 SSO(Single Sign On)单用户登录以及无感刷新token 实现思路 实战代码 小结 前言 为什么使用JWT Jwt提供了生成token以及token验证的方法,而tok

  • 详细聊聊前端如何实现token无感刷新(refresh_token)

    目录 关于无感刷新的理解: 下面是关于使用vuex来实现的写法 axios工具函数(请求拦截器与响应拦截器) 总结 关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的ajax,获取最新的token进行覆盖,让用户感受不到token已经过期,今天写了一个简陋的demo,给大家提供一个参考 下面是关于使用vuex来实现的写法 步骤: 1.先搭好a

  • React如何使用refresh_token实现无感刷新页面

    目录 步骤如下: 具体实现 步骤如下: 1-token过期根据refresh_token获取新的token 重新获取数据 2-创建一个新的axios实例 [使用request防止再次进入请求拦截和请求响应而进入死循环] 3-根据请求相应的响应值 是不是401 是:说明token过期 然后进行判断store中的 user :{token:'*',refresh_token:'**'}中的 refresh_token和user对象是否存在 ,如果不存在说明之前没有登录过,直接去登录 4-使用新创建的

  • 无感知刷新Token示例简析

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

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

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

  • js无痛刷新Token的实现

    这个需求场景很常见,几乎很多项目都会用上,之前项目也实现过,最近刚好有个项目要实现,重新梳理一番. 需求 对于需要前端实现无痛刷新Token,无非就两种: 请求前判断Token是否过期,过期则刷新 请求后根据返回状态判断是否过期,过期则刷新 处理逻辑 实现起来也没多大差别,只是判断的位置不一样,核心原理都一样: 判断Token是否过期 没过期则正常处理 过期则发起刷新Token的请求 拿到新的Token保存 重新发送Token过期这段时间内发起的请求 重点: 保持Token过期这段时间发起请求状

  • 利用php-cli和任务计划实现刷新token功能的方法

    1.业务需求 需要实现这样一个功能:在第三方授权的认证当中,在用户首次登录授权我们会得到一个access_token,有效期为25小时,还会得到一个refresh_token,有效期为30天. 我们只要保存好这个refresh_token,在30天内我们都可以用这个refresh_token去请求一个api,他会返回一个新的access_token.这样我们只需要让用户授权一次,我们就可以获得长达30天的一个授权期限. 这里可以分为几个点: <1>这个应该是要定期执行的一个任务. 25小时才会

随机推荐