前端双token校验，以及处理过程

已于 2024-08-06 18:38:33 修改
阅读量443 收藏 8
点赞数 5
文章标签： 前端
于 2024-08-06 18:33:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liqic/article/details/140359533
版权

1.背景

        由于业务需求，需要对用户信息进行安全性配置，就出现了短token--accessToken，那么短token通常几十分钟就会失效，降低了用户体验，此时后端又返回了一个长token--refreshToken，用来刷新accessToken，提高用户体感，减少用户登录的次数，达到无感刷新的境界。

2.编写逻辑

        登录过后，后端会返回来一个accessToken，refreshToken。我们将这两个token已合适的方式存储起来，accessToken通常设置为请求头header，作为接口鉴权所用，当用户发起请求的时候，后端发现此时的accessToken已经过期了就返回401状态码（状态码看后端程序设定，针对不同做处理），我们就拿refreshToken作为请求参数，调用刷新token令牌的接口，刷新完token后，会返回新的accessToken，这时候要替换掉header中旧的那个accessToken，然后再发起之前的原始请求。此时就达到了双token之间的替换以及无感刷新。

3.具体步骤

3.1 定义一个处理AccessToken失效的函数
 

async function handleAccessTokenError(originalRequest) {
  if(!isRefreshing){
    isRefreshing = true;
    try {
      const refreshToken = getRefreshToken();
      const resp = await axios.post('/coolfly/app/user/refresh-token', { refreshToken });
      if (resp.code === 0) {
        setAccessToken(resp.data?.accessToken);
        onRefreshed(resp.data?.accessToken);
        if (originalRequest) {
          originalRequest.headers['Hc-Authorization'] = resp.data?.accessToken;
          return axios(originalRequest);
        }
      } else if (resp.code === 5) { // RefreshToken 未授权
        removeToken();
        navigateToLogin();
      }
    } catch (refreshError) {
      console.error('Refresh token failed:', refreshError);
      removeToken();
      navigateToLogin();
    } finally {
      isRefreshing = false;
    }
  }

  //重新拿到accessToken后，重新发起请求
  const retryOriginalRequest  =  new Promise((resolve) => {
    addRefreshSubscriber((token) => {
      originalRequest.headers['Hc-Authorization'] = token;
      resolve(service(originalRequest));
    });
  })
  return retryOriginalRequest;
}
  • isRefreshing：用来避免在刷新令牌的过程中发起多个请求。
  • RefreshToken流程：
    1. 检查RefreshToken是否存在。
    2. 如果存在，使用它来请求新的AccessToken。
    3. 成功获取新令牌后，更新存储的AccessToken并重新发送原始请求。
    4. 如果RefreshToken也失效，移除令牌并重定向到登录页面。

3.2 辅助函数编写，提高代码可读性
 

function onRefreshed(token) {
  refreshSubscribers.map((callback) => callback(token));
  refreshSubscribers = [];
}

function addRefreshSubscriber(callback) {
  refreshSubscribers.push(callback);
}

function hintMsg(msg) {
  const translatedMessage = i18n.t(msg);
  message.info(translatedMessage);
}

function navigateToLogin() {
  window.location.replace('/#');
}
详细解释：
  • onRefreshed：用于通知所有等待中的请求刷新后的新令牌。
  • addRefreshSubscriber：将请求加入等待队列，以便在令牌刷新后继续处理。
  • hintMsg：用于显示国际化提示消息。
  • navigateToLogin：用于跳转到登录页面。

3.3 request源文件代码如下（去掉一些无关紧要的业务代码）：

import axios from "axios";
import { message } from "antd";
import Config from "@/settings.js";
import {  getUserInfo, getAccessToken, setAccessToken, getRefreshToken, removeToken } from "@/utils/auth.js";
import store from "@/store";
import { SetUserInfo } from "@/store/modules/auth/action.js";
import { encrypt } from '@/utils/cryptojs.js'
import i18n from 'i18next';

let isRefreshing = false;
let refreshSubscribers = [];

function onRefreshed(token) {
  refreshSubscribers.map((callback) => callback(token));
  refreshSubscribers = [];
}

function addRefreshSubscriber(callback) {
  refreshSubscribers.push(callback);
}

function hintMsg(msg) {
  const translatedMessage = i18n.t(msg);
  message.info(translatedMessage);
}

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // api 的 base_url
  // baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: Config.timeout, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  (config) => {
    // 设置通用请求头
   
    config.headers['Content-Type'] = 'application/json';
    // 根据token设置Authorization头
    // const { accessToken } = getUserInfo()
    if (getAccessToken()) {
      const userInfo = getUserInfo();
      config.headers['Authorization'] = getAccessToken() || userInfo.accessToken;
      config.headers['Uid'] = userInfo.uid;
    }
    //加密请求  需要加密的接口路径
    const encryptedApis = [
      '/api/app/user/login',
      '/api/app/user/refresh-token',
      '/api/app/user/reset-pwd',
      '/api/app/user/register',
      '/api/app/auth/aws-s3/upload',  //文件上传
      '/api/app/auth/aws-s3/get/ps',  //文件预签名
    ];
    if (encryptedApis.includes(config.url)) {

      config.headers['Content-Type'] = 'text/plain;charset=UTF-8.';
      if (config.data) {
        config.data = encrypt(config.data);
      }
    }
    return config;
  }
);

// response 拦截器
service.interceptors.response.use(
  (response) => {
    const {data, status } = response;
    const { code, message}  = data;
    if (code === 0 && status === 200) {
      return data;
    }else {
      hintMsg(message);
      handleErrorCode(code, message, response.config)
      return Promise.reject(data);
    }
  },
  async (error) => {
      const responseCode = error.response?.status || error.response?.data;
      if (responseCode !== undefined) {
        await handleErrorCode(responseCode, error.response?.message, error.config);
      } else {
        hintMsg("serverError");
      }
      return Promise.reject(error);
  }
);

async function handleErrorCode(code, message, originalRequest = null) {
  switch (code) {
    case 1: // AccessToken 未授权
      // hintMsg("UserError");
      return await handleAccessTokenError(originalRequest);
    case 5: // RefreshToken 未授权
      message.error(message)
      removeToken();
      navigateToLogin();
      break;
    case 98: // 服务器繁忙
      hintMsg("serverError");
      break;
    case 99: // 服务器内部错误
      store.dispatch(SetUserInfo(null));
      removeToken();
      message.error(message)
      hintMsg("serverError");
      break;
    default:
      hintMsg(message || "serverError");
      break;
  }
}

async function handleAccessTokenError(originalRequest) {
  if(!isRefreshing){
    isRefreshing = true;
    try {
      const refreshToken = getRefreshToken();
      const resp = await axios.post('/api/app/user/refresh-token', { refreshToken });
      if (resp.code === 0) {
        setAccessToken(resp.data?.accessToken);
        onRefreshed(resp.data?.accessToken);
        if (originalRequest) {
          originalRequest.headers['Authorization'] = resp.data?.accessToken;
          return axios(originalRequest);
        }
      } else if (resp.code === 5) { // RefreshToken 未授权
        removeToken();
        navigateToLogin();
      }
    } catch (refreshError) {
      console.error('Refresh token failed:', refreshError);
      removeToken();
      navigateToLogin();
    } finally {
      isRefreshing = false;
    }
  }

  //重新拿到accessToken后，重新发起请求
  const retryOriginalRequest  =  new Promise((resolve) => {
    addRefreshSubscriber((token) => {
      originalRequest.headers['Authorization'] = token;
      resolve(service(originalRequest));
    });
  })
  return retryOriginalRequest;
  
}

function navigateToLogin() {
  window.location.replace('/#')
}

export default service;

总结

通过以上步骤，我们实现了一个双Token验证的流程。该流程包括AccessToken和RefreshToken的管理、请求拦截和响应处理，以及错误处理和提示。这样的配置能够有效提升应用的安全性和用户体验。

SimmerLee.
关注
JWT之token机制与双token详解
qq_41634455的博客
01-13 1万+
token机制 何为token ​ token即为令牌，是服务器生成的一串字符串，作为客户端向服务器进行请求的“通行证”。在客户端进行初次登陆后由服务器返回，之后的每次请求只需要携带token进行请求即可，而无需携带密码等敏感信息 为何token token可以减少敏感信息在网络间的传递 因为json的通用性，所以JWT是可以进行跨语言支持的，像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用 JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息 便于传输，jwt的构成非常简单
web前端之双token的神奇功效-登陆验证
10-12 1353
细心的你可能会发现，我们在使用app的时候只需要登陆一次账号之后下一次打开就不需要再次登陆，但经过一段时间不登录之后又会要求我们重新登陆，你知道这是如何实现的吗？ 双token验证 具体说明如下： 1.根据需要下载软件，完成注册账户 2.登录账户，后端返回 两个token信息，分别为 access_token 以及 refresh_token，access_token称之为短token，refresh_token称之为长token ...
双token认证的实现流程图
命师
04-15 1393
操作机制：双Token主要包含了AccessToken (访问令牌) 和 RefreshToken (刷新令牌)，它的出现就是为了解决单token的不足，所以才会引入双token的机制也就是 RefreshToken (刷新令牌)，因为它可以延长实际的绘画时间，用户提供了一种安全的方式来去更新AccessToken，并且在必要的时候撤销特定用户的权限，而并不会影响有效的绘画内容。没有权限细分管理（单一的access token包含所有的授权信息，不易于对不同范文或者是力度的一个资源进行精细化的访问控制）
前端技术 双token的实现流程
qq_65615178的博客
04-25 697
具体的实现细节可以通过调用服务器端提供的API来实现，例如使用jQuery库中的Ajax函数来发送表单数据到服务器端，或者使用WebSocket来实现服务器端推送token值到用户手机上。同时，为了保证双token认证的安全性，前端需要做好数据加密、输入验证及异常处理等方面的工作。
前端双token无感刷新详解
最新发布
weixin_46714216的博客
08-04 1343
在介绍双token无感刷新之前，我们先简单介绍一下什么是token吧！token是一种用户标识，表示用户身份，类似于我们的身份证件。Token是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回Token给前端。前端可以在每次请求的时候带上Token证明自己的合法地位。如果这个Token在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。
登录双token方案
hijunmeng的专栏
05-11 7635
双token方案 当我们需要用户在指定时间内有操作时就可以不用登录（首次登录还是免不了的），而在指定时间内没有任何操作时就需要重新登录的话，那么就需要对token方案进行一定设计 目前比较推荐的做法是使用双token方案 用户在登录之后返回access_token和refresh_token（这里假定他们的有效期分别是2小时和7天） 当access_token未过期时，则请求正常 ...
前后端如何实现登录token拦截校验详解
12-10
一、场景与环境 最近需要写一下前后端分离下的登录解决方案，目前大多数都采用请求头携带 Token 的...  c、前端在此后的每次请求，都会携带token与后端校验；   d、在token有效时间内前端的请求响应都会成功，
双Token校验机制
swk1300524046的博客
10-17 785
双Toekn机制，token
token校验以及前后台代码实现
congguanliu5887的博客
03-05 921
1、token定义 Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。 2、基于 Token 的身份验证 使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。流程是这样的： 客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收
后端返还给前端token安全校验
05-18
以下是一个简单的 token 校验过程： 1. 后端生成 token，并将其返回给前端。 2. 前端在请求头或请求参数中携带 token。 3. 后端解析 token，并验证其有效性和合法性。 4. 如果 token 通过校验，则认为该请求是合法...
用户登录设计之双token设计
CRMEB小程序商城的博客
12-02 5228
背景 笔者在做的一个项目之前的登录接口是实习生写的，登录设计就是简单的提交用户名密码获取token，然后token的过期时间巨长是30天，于是乎另一位工作年限长一点的同事修改了代码，变成了登录获取两个token： 1.accessToken: 真正用来获取数据的权限 2.refreshToken: 用来获取accessToken 为什么需要双token? 总所周知，token是为了防止用户信息传来传去导致被劫持，但是假如token没有过期时间或者过期很长，那么显然token被劫持还是不安全的，token就
关键接口开启双重校验
哈哈的博客
11-13 227
注意：需要前端配置 针对关键接口处理返回的token信息。 1、整体思路 针对某些关键性的页面数据操作在调用展示数据页面时，后台针对此接口重写返回的token信息，前端拿到token信息后，进行本地保存，在当前页面进保存操作时，进行校验(包含时间校验)。当在页面停留过久时提示刷新页面，这样可以防止直接通过接口调用写入脏数据。 2、实现步骤 创建拦截器、注册拦截器，创建注解、在拦截器的preHandle方法、postHandle方法中处理针对不同的注解进行处理。 ...
实战指南：在Vue.js与Express中实现双Token验证以提升API安全性及用户体验
afeng_666的博客
04-11 1266
双Token验证体系结构的核心在于Access Token与Refresh Token的协同工作。而Refresh Token则扮演着长期授权的角色，在Access Token失效后，用于获取新的Access Token，避免了频繁要求用户重新登录。其中，Token验证作为一种灵活且安全的身份验证方式，尤其在OAuth 2.0标准中得到了广泛应用。今天我们将深入探讨一种更为安全的身份验证机制——双Token验证，并通过实例演示如何在实际项目中实施这一方案。
什么是双token验证规则
YaecSakura的博客
04-20 361
在数据表中存在一个access_token和refresh_token的对应关系，当access_token过期的时候，去数据库中寻找相对应当refresh_token进行验证，随后生成新的access_token和refresh_token。(刷新) 当access_token过期时，才会用到refresh_token,作用：相当与一个令牌，可以拿着refresh_token生成一个新的access_token。允许) 请求所携带的为access_token 进行接口权限校验。
双token登录验证方案简单总结
云雨之石的博客
04-13 3020
今天做项目登录部分，跟旁边同事交流登录过程中封装的一个名为refreshToken的一个API，我有些纳闷，不懂这个refreshToken刷新token有什么用，是要跳转到登录页重新登录获取token吗？如果是这样，那为什么定这样一个名字而不叫做reLogin呢？ 经过几分钟的交流，我得到了答案： 原来，我们的系统为了安全方面的考虑，定义了两个token，一个token是验证登录的token，一个token是refresh的token，这两个token中，前者的过期时间较短，后者的过期时间较长 当用户登录
双Token验证机制实现用户持续操作页面不过期
行云的博客
07-14 1067
双token验证机制场景设置 在基于token验证登录态这个情境下，可以想象一个场景，你在使用app或者在网页上进行操作时，你的token突然就过期了，然后只好被迫停止现在正在进行的操作跳转到登录页进行重新登录操作，这就非常的智熄了，这带给用户，特别是经常使用或正在进行某个操作的用户，一种非常不好的体验。这就是单token验证登录的一个缺点。因此对于经常/正在使用...
双token校验机制
热门推荐
marko_zheng的博客
11-15 1万+
双token校验机制 什么是token token是客户端登陆的时候由服务端生成，之后每次请求都需要携带token进行请求。校验用户身份呢的作用 为什么使用token 减少敏感信息的传递 可以校验用户身份的准确性以及有效期 单token登录流程以及请求校验流程 注意 token是使用base64的形式进行加密的 是有一部分存储在客户端中，所以，token中不建议存放敏感信息 双token校验机制 场景设想： ​ 用户正在app或者应用中操作 token突然过期，此时用户不得不返回登陆界面，重新进行一
登录生成双token的理解
m0_64479814的博客
04-21 5195
双token机制是为了提高系统安全性而采用的一种措施。它指的是在登录成功后,会生成两个token返回给客户端::用于访问受限资源,有一定的生命周期,过期需要重新获取。:用于刷新Access Token,生命周期较长。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值