无感刷新token（从后端到前端整个流程）

最新推荐文章于 2024-05-25 11:29:57 发布
最新推荐文章于 2024-05-25 11:29:57 发布
阅读量824 收藏 8
点赞数 8
文章标签： 前端 开发语言 web安全 网络 安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bdfcfff77fa/article/details/135674549
版权

前言

token刷新是前端安全中必要的一部分，本文从后端到前端整个流程介绍如何实现无感刷新token。页面代码亲自实现并跑通，请放心食用。如需源码，请在评论区留言。码字不易，点赞支持！！！

一、实现思路

通过长短token实现：短token用来请求应用数据，长token用于获取新的短token（长短指的是过期时间）

二、后端设计

  • 后端存有两个字段，分别保存长短token，并且每一段时间更新他们
  • 短token过期，返回 returncode:104；长token过期，返回 returncode: 108；请求成功返回returncode: 0；
  • 请求头中pass用来接收客户端长token，请求头中authorization用来接收客户端短token

1. 搭建node服务

创建一个新文件夹，通过vscode打开，运行：

npm init -y

安装koa

npm i koa -s

新建index.js

const Koa = require('koa')
const app = new Koa();

app.use(async(ctx,next)=>{
    ctx.body = "这是一个应用中间件";
    await next()
})

app.listen(4000,() => {
    console.log('server is listening on port 4000')
})

安装nodemon

npm i nodemon -g

配置package.json

"dev":"nodemon index.js",

运行：npm run dev 访问：127.0.0.1:4000，可以看到页面显示这是一个应用中间件

2. 使用路由中间件

安装

npm i koa-router -S

新建routes/index.js

const router = require("koa-router")();
let accessToken = "init_s_token"; //短token
let refreshToken = "init_l_token"; //长token

/* 5s刷新一次短token */
setInterval(() => {
  accessToken = "s_tk" + Math.random();
}, 5000);

/* 一小时刷新一次长token */
setInterval(() => {
  refreshToken = "l_tk" + Math.random();
}, 600000);

/* 登录接口获取长短token */
router.get("/login", async (ctx) => {
  ctx.body = {
    returncode: 0,
    accessToken,
    refreshToken,
  };
});

/* 获取短token */
router.get("/refresh", async (ctx) => {
  //接收的请求头字段都是小写的
  let { pass } = ctx.headers;
  if (pass !== refreshToken) {
    ctx.body = {
      returncode: 108,
      info: "长token过期，重新登录",
    };
  } else {
    ctx.body = {
      returncode: 0,
      accessToken,
    };
  }
});

/* 获取应用数据1 */
router.get("/getData", async (ctx) => {
  let { authorization } = ctx.headers;
  if (authorization !== accessToken) {
    ctx.body = {
      returncode: 104,
      info: "token过期",
    };
  } else {
    ctx.body = {
      code: 200,
      returncode: 0,
      data: { id: Math.random() },
    };
  }
});

/* 获取应用数据2 */
router.get("/getData2", async (ctx) => {
  let { authorization } = ctx.headers;
  if (authorization !== accessToken) {
    ctx.body = {
      returncode: 104,
      info: "token过期",
    };
  } else {
    ctx.body = {
      code: 200,
      returncode: 0,
      data: { id: Math.random() },
    };
  }
});

module.exports = router;

修改index.js

//删除
app.use(async(ctx,next)=>{
    ctx.body = "这是一个应用中间件";
    await next()
})
//新增
const index = require('./routes/index')
app.use(index.routes(),index.allowedMethods())

3. 跨域处理

安装

npm i koa2-cors

使用：

const cors = require('koa2-cors');

app.use(cors());

最终index.js文件

const Koa = require('koa')
const app = new Koa();
const index = require('./routes/index')

const cors = require('koa2-cors');

app.use(cors());

app.use(index.routes(),index.allowedMethods())

app.listen(4000,() => {
    console.log('server is listening on port 4000')
})

目录结构：

重新运行 npm run dev，这时服务端已准备好

三、前端设计

1. 定义使用到的常量

新建 config/constant.js

/* localStorage存储字段 */
export const ACCESS_TOKEN = "s_tk"; //短token
export const REFRESH_TOKEN = "l_tk"; //长token、
/* HTTP请求头字段 */
export const AUTH = "Authorization"; //存放短token
export const PASS = "PASS"; //存放长token

新建 config/returnCodeMap.js

// 在其它客户端被登录
export const CODE_LOGGED_OTHER = 106;
// 重新登陆
export const CODE_RELOGIN = 108;
// token过期
export const CODE_TOKEN_EXPIRED = 104;
//接口请求成功
export const CODE_SUCCESS = 0;

2. 封装服务

关键点：将token过期的请求，借助Promise将请求存进数组中，让这个Promise一直处于pending状态（即不调用resolve），当获取到新的短token时，再逐个重新请求

如果不保持promise链，就会当成一个新的请求，页面内容不会更新

安装axios

npm i axios -S

新建 service/index.js

import axios from "axios";
import { refreshAccessToken, addSubscriber } from "./refresh";
import { clearAuthAndRedirect } from "./clear";
import {
  CODE_LOGGED_OTHER,
  CODE_RELOGIN,
  CODE_TOKEN_EXPIRED,
  CODE_SUCCESS,
} from "../config/returnCodeMap";
import { ACCESS_TOKEN, AUTH } from "../config/constant";

const service = axios.create({
  baseURL: "//127.0.0.1:4000",
  timeout: 30000,
});

service.interceptors.request.use(
  (config) => {
    let { headers } = config;
    const s_tk = localStorage.getItem(ACCESS_TOKEN);
    s_tk &&
      Object.assign(headers, {
        [AUTH]: s_tk,
      });
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    let { config, data } = response;
    //retry:第一次请求过期，接口调用refreshAccessToken，第二次重新请求，还是过期则reject出去
    let { retry } = config;
    /* 延续Promise链 */
    return new Promise((resolve, reject) => {
      if (data["returncode"] !== CODE_SUCCESS) {
        if ([CODE_LOGGED_OTHER, CODE_RELOGIN].includes(data.returncode)) {
          clearAuthAndRedirect();
        } else if (data["returncode"] === CODE_TOKEN_EXPIRED && !retry) {
          config.retry = true;
          addSubscriber(() => resolve(service(config)));
          refreshAccessToken();
        } else {
          return reject(data);
        }
      } else {
        resolve(data);
      }
    });
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;

新建 service/refresh.js

import service from "./index";
import { ACCESS_TOKEN, REFRESH_TOKEN, PASS } from "../config/constant";
import { clearAuthAndRedirect } from "./clear";

let subscribers = [];
let pending = false; //同时请求多个过期链接，保证只请求一次获取短token

export const addSubscriber = (request) => {
  subscribers.push(request);
};

export const retryRequest = () => {
  subscribers.forEach((request) => request());
  subscribers = [];
};

export const refreshAccessToken = async () => {
  if (!pending) {
    try {
      pending = true;
      const l_tk = localStorage.getItem(REFRESH_TOKEN);
      if (l_tk) {
        /* 重新获取短token */
        const { accessToken } = await service.get(
          "/refresh",
          Object.assign({}, { headers: { [PASS]: l_tk } })
        );
        localStorage.setItem(ACCESS_TOKEN, accessToken);
        retryRequest();
      }
      return;
    } catch (e) {
      clearAuthAndRedirect();
      return;
    } finally {
      pending = false;
    }
  }
};

新建 service/clear.js

import {ACCESS_TOKEN} from '../config/constant'

/* 清除长短token，并定位到登录页（在项目中使用路由跳转） */
export const clearAuthAndRedirect = () =>{
    localStorage.removeItem(ACCESS_TOKEN)
    window.location.href = '/login'
}

3. 使用

这里使用react实现，使用vue效果一样

//App.js

import { useState } from "react";import service from "./service/index.js";import { ACCESS_TOKEN, REFRESH_TOKEN } from "./config/constant";const App = () => {  const [data1, setData1] = useState();  const [data2, setData2] = useState();  const getData = () => {    service.get("/getData").then((res) => {      setData1(res.data.id);    });    service.get("/getData2").then((res) => {      setData2(res.data.id);    });  };  const getToken = () => {    service.get("/login").then((res) => {      //存储长token      localStorage.setItem(REFRESH_TOKEN, res.refreshToken);      //存储短token      localStorage.setItem(ACCESS_TOKEN, res.accessToken);    });  };  return (    <div>      {data1}--{data2}      <button onClick={getData}>按钮</button>      <button onClick={getToken}>登录</button>    </div>  );};export default App;

运行项目，查看效果

先点击登录按钮获取长短token，过5秒再去点击按钮，获取应用数据（上面后端设置了短token 5s过期）

页面数据能更新，并且refresh接口只调用一次

essToken); }); }; return (

{data1}–{data2} 按钮 登录
);};export default App; 



运行项目，查看效果

先点击登录按钮获取长短token，过5秒再去点击按钮，获取应用数据（上面后端设置了短token 5s过期）

页面数据能更新，并且refresh接口只调用一次

# 学习资料分享

当然，**只给予计划不给予学习资料的行为无异于耍流氓**，###                   如果你对网络安全入门感兴趣，那么你点击这里**👉**[CSDN大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享](https://mp.weixin.qq.com/s/kmoGmxbG8GrCsPzWTPIQyw)

**如果你对网络安全感兴趣，学习资源免费分享，保证100%免费！！！（嘿客入门教程）**

**👉网安（嘿客）全套学习视频👈**

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。

### 

### ![img](https://img-blog.csdnimg.cn/img_convert/d1c617b78ee48eda7601e5b803e69276.png)

### **👉网安（嘿客红蓝对抗）所有方向的学习路线****👈**

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

### ![img](https://img-blog.csdnimg.cn/img_convert/de55dfd737dae0cf88e416d0454b17a8.png)

###  学习资料工具包

压箱底的好资料，全面地介绍网络安全的基础理论，包括逆向、八层网络防御、汇编语言、白帽子web安全、密码学、网络安全协议等，将基础理论和主流工具的应用实践紧密结合，有利于读者理解各种主流工具背后的实现机制。

![在这里插入图片描述](https://img-blog.csdnimg.cn/9609a53465cf4253b492a5185896fa71.png)

**面试题资料**

独家渠道收集京东、360、天融信等公司测试题！进大厂指日可待！
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f5f267c281c543fb9cc9af53b9003a37.png)

### **👉****嘿客必备开发工具****👈**

工欲善其事必先利其器。学习**嘿**客常用的开发软件都在这里了，给大家节省了很多时间。

### 这份完整版的网络安全（**嘿**客）全套学习资料已经上传至CSDN官方，朋友们如果需要点击下方链接**也可扫描下方微信二v码获取网络工程师全套资料**【保证100%免费】



### ![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/16c400294b6fda8f01400f24f1f12b0c.png)

###               如果你对网络安全入门感兴趣，那么你点击这里**👉**[CSDN大礼包：《黑客&网络安全入门&进阶学习资源包》免费分享](https://mp.weixin.qq.com/s/kmoGmxbG8GrCsPzWTPIQyw)
程序媛尤尤
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中前端利用refreshToken结合axios拦截器实现token的无感刷新
01-16
内容概要： ...3、同时多个请求返回401，需要刷新token。 阅读建议：此资源以简单的demo演示了RefreshToken使用的全过程，介绍了基本的思路，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
五分钟带你详细了解无感刷新Token技术（Vue+express）
weixin_69810763的博客
09-12 2308
无感刷新Token技术是一种在客户端应用中自动刷新访问令牌的机制，它通过提供用户无感知的刷新操作，改善了用户体验，提高了安全性，同时减轻了服务端的负担。这项技术适用于各种Web应用、移动应用和单页应用等场景，特别适用于需要长时间访问令牌和多终端登录的应用。通过无感刷新Token技术，我们能够在保证用户会话持续性的同时，提供更好的安全性和便利性。
2024年前端最新vue2实现无感刷新token_vue2 会无感刷新，web前端开发就业情况
2401_84617131的博客
05-07 307
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】🎬 江城开朗的豌豆个人主页🔥 个人专栏《 VUE 》📝个人网站《 江城开朗的豌豆🫛 》⛺️ 生活的理想，就是为了理想的生活!目录📟 安装依赖📟 创建 Axios 实例并做请求封装📟 使用封装的 Axios 实例📘 写在最后。
实现Token的无感刷新，React与Node.js
最新发布
gaotlantis的博客
05-25 843
Token的无感刷新基本就实现完了，但我还发现了一个问题，暂时不知道怎么解决：在我测试的时候，如果有10个 并发的请求，后端处理后全都返回401，然后肯定会有第一个回到前端的请求触发token刷新，随后若是token刷新完成，flag已经置为true，还有后续请求没有来得及回到前端被添加到队列中，他又会重新进入刷新token的逻辑，会导致token的多次刷新。作者：林可like链接：https://juejin.cn/post/7372135071979487247来源：稀土掘金。
实现token的无感刷新
m0_70902093的博客
06-29 4511
作用：在访问一些接口时，需要传入token，就是它。有效期：2小时（安全）。作用: 当token的有效期过了之后，可以使用它去请求一个特殊接口（这个接口也是后端指定的，明确需要传入refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的那个token。有效期：14天。（最理想的情况下，一次登陆可以持续14天。
关于实现token无感刷新的解决方案
热门推荐
菜鸟的博客
11-27 1万+
问题引入 在开发中为了安全或满足分布式场景，通常会舍弃原有的session认证手段，而采用jwt(json web token)；但是使用token难免遇到token有效期的问题，如果token长期有效，服务端不断发布新的token，导致有效的token越来越多，这必然是存在安全问题的。而token不想session一样，在用户操作时会进行刷新，为了用户体验，这个刷新就需要自己实现。 方案 一、使用旧token获取新token 如果采取单个token的方式要实现token的自动刷新，就必须使用定时器，每隔一
token无感刷新
wyh666csdn的博客
01-09 2831
最近遇到个需求：前端登录后，后端返回和，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。
前端如何实现token的无感刷新
xiangzhihong8的专栏
10-22 877
通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新token，并替换之前的token。 要做到token的无感刷新，主要有3种方案： 方案一： 后端返回过期时间，前端每次请求就判断token的过期时间，如果快到过期时间，就去调用刷新token接口。 缺点：需要后端额外提
实现无感刷新token，我是这样做的
CRMEB小程序商城的博客
10-14 1820
前言 最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点，我频繁的要去登录。 前端：后端，你能不能把token 过期时间设置的长一点。 后端：可以,但是那样做不安全，你可以用更好的方法。 前端：什么方法? 后端：给你刷新token的接口，定时去刷新token 前端：好，让我思考一下 需求 当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。实现思路 方法一 后端返回过期时间，前端判断token过期时
微信小程序自动刷新token，无感刷新token，封装的api工具类
07-12
小程序登录开发通常是调用wx.login获取code，然后发送到后台，后台请求微信拿到用户openId，然后根据openId查询用户，有就走登录流程然后返回token，没有则创建用户之后走登录流程然后返回token，也就是都需要返回一...
axios如何利用promise无痛刷新token的实现方法
10-16
在本文中，我们将深入探讨如何使用axios和Promise无痛地刷新token。首先，我们需要了解什么是axios和Promise。Axios是一个基于Promise的HTTP库，既可以用在浏览器，也可以用在Node.js环境中，它提供了丰富的API来...
请求时token过期自动刷新token操作
11-19
自动刷新`token`的流程通常是，当检测到一个请求因`token`过期而失败时，客户端自动向服务器发送刷新`token`的请求，获取新的`token`，然后用新`token`重试之前的失败请求。 在本文中，我们讨论的是使用`axios`库...
VUE前端实现token的无感刷新
老电影故事的博客
08-30 9109
说实话，这个其实没啥好讲的，要说有复杂度的话，也主要是在后端。实现token无感刷新对于前端来说是一项十分常用的技术，其本质都是为了优化用户体验，当token过期时不需要用户调回登录页重新登录，而是当token失效时，进行拦截，发送刷新token的请求，获取最新的token进行覆盖，让用户感受不到token已过期。
关于前端实现token无感刷新(refresh_token)
weixin_69356624的博客
07-10 4362
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的ajax,获取最新的token进行覆盖,让用户感受不到token已经过期,今天写了一个简陋的demo,给大家提供一个参考步骤: 1.先搭好axios骨架,以及请求拦截器与响应拦截器 2.再封装好ajax的接口,一个获取token的,一个需要token发送ajax的(获取用户信息等) 3
长短token生成方式及作用
紫极岚的博客
12-12 1万+
长短token解决方案 1：解释长短token     Token的返回:     用户登陆后，后台会返回给用户两个token，1是长token，2是短token     有效期： 长token有效期为一个月，短token有效期为1小时 访问与再次获取： APP每次访问数据携带这短token,如果后台中存在短token则证明短token有效可以进行数据访问。 如果没有查到该短tok
实现无感刷新token(看这一篇就够了)
weixin_57909742的博客
11-09 3047
无感知刷新Token是指，在Token过期之前，系统自动使用Refresh Token获取新的Access Token，从而实现Token的无感知刷新，用户可以无缝继续使用应用。如何判断Token是否过期？如何在Token过期时自动使用Refresh Token获取新的Access Token？下面将介绍如何实现无感知刷新Token的具体步骤。无感刷新Token技术是一种在客户端应用中自动刷新访问令牌的机制，它通过提供用户无感知的刷新操作，改善了用户体验，提高了安全性，同时减轻了服务端的负担。
无感刷新 token
阿城的博客
11-03 1415
又因为无论是 access token 还是 refresh token 都是放在请求头的 authorization 上携带，此时请求拦截设置的 access token 就会覆盖掉 refresh token，导致刷新接口拿不到 refresh token。前一个刷新请求还没拿到最新的 access token，后一个刷新请求又发出了，这就出现了并发刷新 token ，冗余发送请求的情况。在请求拦截器中保存当前请求的url到数组中，后续的请求都需要判断一下，当前请求的url是否已经在数组中。
关于无感刷新Token，我是这样子做的
梅花寺
02-06 212
JWT是全称是，是一个开放标准，用于将各方数据信息作为JSON格式进行对象传递，可以对数据进行可选的数字加密，可使用RSA或ECDSA进行公钥/私钥签名。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
前端面试题无感刷新token
04-05
这道题涉及到前端中的认证和授权问题，以及如何在前端中处理 token 刷新的问题。 认证和授权是指用户在访问系统资源时需要进行身份验证和权限验证。前端通常会在用户登录后返回一个 token，然后在每次请求时将 token 带上，服务端会通过 token 来判断用户是否有权限访问资源。 在使用 token 进行认证和授权时，由于 token 有一定的有效期限制，因此需要在 token 过期前进行刷新。在前端中可以通过定时器来定时检查 token 的有效期，当 token 即将过期时，发送一个刷新 token 的请求，获取新的 token，然后将新的 token 存储在本地，同时更新请求头中的 token。 以下是一个示例代码： ```javascript // 定义定时器，每隔一段时间检查 token 是否即将过期 let timer = setInterval(() => { let token = localStorage.getItem('token') let expiredTime = localStorage.getItem('expiredTime') if (new Date().getTime() > expiredTime - 60000) { // token 即将过期 refreshToken(token) } }, 1000) // 刷新 token 的函数 function refreshToken(token) { // 发送请求获取新的 token axios.post('/refreshToken', {token: token}) .then(res => { // 更新本地存储的 token 和过期时间 localStorage.setItem('token', res.data.token) localStorage.setItem('expiredTime', new Date().getTime() + res.data.expiresIn * 1000) // 更新请求头中的 token axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.token }) } ``` 需要注意的是，当用户退出登录时，需要及时清空本地存储的 token 和过期时间，并停止定时器。 ```javascript function logout() { localStorage.removeItem('token') localStorage.removeItem('expiredTime') clearInterval(timer) } ``` 总之，前端刷新 token 的主要思路就是定时检查 token 的有效期，当即将过期时发送一个刷新 token 的请求，获取新的 token，然后更新本地存储的 token 和过期时间，并更新请求头中的 token。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值