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

前言

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) => {//存储长tokenlocalStorage.setItem(REFRESH_TOKEN, res.refreshToken);//存储短tokenlocalStorage.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接口只调用一次

网络安全成长路线图

这个方向初期比较容易入门一些，掌握一些基本技术，拿起各种现成的工具就可以开黑了。不过，要想从脚本小子变成hei客大神，这个方向越往后，需要学习和掌握的东西就会越来越多，以下是学习网络安全需要走的方向：

# 网络安全学习方法

​ 上面介绍了技术分类和学习路线，这里来谈一下学习方法：
​ ## 视频学习

​ 无论你是去B站或者是油管上面都有很多网络安全的相关视频可以学习，当然如果你还不知道选择那套学习，我这里也整理了一套和上述成长路线图挂钩的视频教程，完整版的视频已经上传至CSDN官方，朋友们如果需要可以点击这个链接免费领取。网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！