模块化封装 --- 双ToKen 实现免登录步骤详解

本文大概配置了下双token免登录
关于下文提到的store中封装的保存token的方法，请参考本链接：

/*** 封装 axios 请求模块*/
import axios from 'axios'
import jsonBig from 'json-bigint'
import store from '@/store'
import router from '@/router' // 导入路由模块
// 配置公共请求头
const request = axios.create({baseURL: 'xxxxxx/', // 基础路径transformResponse: [ // 下面的写法二“function(data) { // data  是后端返回的原始数据 ，一般是JSON对象，格式不确定，所以可能报错，使用try catchtry {return jsonBig.parse(data) // 注意这里返回出去的 BigNumber 对象是一个对象，在使用时要注意不能直接使用，需要转换成字符串来使用} catch (err) {return {}}}]
})
/*** 配置处理后端返回数据中超出 js 安全整数范围问题* 这是axios中的 api -- transformResponse , axios 默认会在内部这样处理后端返回的数据* 所有请求都会经过这个，写法一：*/
// request.defaults.transformResponse = [
//   function(data) {//     try {//       return jsonBig.parse(data)
//     } catch (err) {//       return {}
//     }
//   }
// ]// 请求拦截器
request.interceptors.request.use(function(config) {const user = store.state.userif (user) {config.headers.Authorization = `Bearer ${user.token}`}// Do something before request is sentreturn config},function(error) {// Do something with request errorreturn Promise.reject(error)}
)
// 响应拦截器
request.interceptors.response.use(// 响应成功进入第1个函数// 该函数的参数是响应对象function(response) {// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response datareturn response},// 响应失败进入第2个函数，该函数的参数是错误对象async function(error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response error// 如果响应码是 401 ，则请求获取新的 token// 响应拦截器中的 error 就是那个响应的错误对象console.dir(error)if (error.response && error.response.status === 401) {// 校验是否有 refresh_tokenconst user = store.state.userif (!user || !user.refresh_token) {router.push('/login')  // 直接跳转会登陆页面// 代码不要往后执行了return}// 如果有refresh_token，则请求获取新的 tokentry {const res = await axios({method: 'PUT',url: 'xxxxxxxxxxxx', // 设置重新获取新的token 接口headers: {Authorization: `Bearer ${user.refresh_token}` // 使用 user中存储的 refresh_token 去获取新的token}})// 如果获取成功，则把新的 token 更新到容器中console.log('刷新 token  成功', res)store.commit('xxx', {  // 调用 store/index.js 中封装的方法来保存 新的 token  // 这个封装的方法在本文没有写，在该 链接中有说明 https://blog.csdn.net/weixin_47988564/article/details/108066478token: res.data.data.token, // 最新获取的可用 tokenrefresh_token: user.refresh_token // 还是原来的 refresh_token})// 把之前失败的用户请求继续发出去// config 是一个对象，其中包含本次失败请求相关的那些配置信息，例如 url、method 都有// return 把 request 的请求结果继续返回给发请求的具体位置return request(error.config)} catch (err) {// 如果获取失败，直接跳转 登录页console.log('请求刷线 token 失败', err)router.push('/login')}}return Promise.reject(error)}
)
export default request

模块化封装 --- 双ToKen 实现免登录步骤详解相关推荐

微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
火狐浏览器账号登录步骤详解
打开火狐浏览器,点击右上角的火狐账户图标,并选取登录; 火狐怎么登录账号?火狐浏览器账号登录步骤详解火狐怎么登录账号?火狐浏览器账号登录步骤详解输入点击右键地址,再按下"确定" ...
微博爬虫“免登录”技巧详解及Java实现
本文源地址:http://www.fullstackyang.com/...,转发请注明该地址或segmentfault地址,谢谢! 一.微博一定要登录才能抓取? 目前,对于微博的爬虫,大部分是基于模 ...
微博爬虫“免登录”技巧详解及 Java 实现(业余草的博客)
一.微博一定要登录才能抓取? 目前,对于微博的爬虫,大部分是基于模拟微博账号登录的方式实现的,这种方式如果真的运营起来,实际上是一件非常头疼痛苦的事,你可能每天都过得提心吊胆,生怕新浪爸爸把你的那些账 ...
多维系统下单点登录深入详解
多维系统下单点登录深入详解 1. 从淘宝天猫的单点登录说起 1.1 SSO单点登录 1.2 淘宝天猫登录场景解析 2. 单点登录之整体解决方案 2.1 设计方案-Cookie 2.2 设计方案-分布式 ...
[转]大数据环境搭建步骤详解（Hadoop，Hive，Zookeeper，Kafka，Flume，Hbase，Spark等安装与配置）
大数据环境安装和配置(Hadoop2.7.7,Hive2.3.4,Zookeeper3.4.10,Kafka2.1.0,Flume1.8.0,Hbase2.1.1,Spark2.4.0等) 系统说明 ...
MySQL安装教程包含所有平台（图解），MySQL下载步骤详解（带安装教程）
现在作为服务器的操作系统一般有两种,分别是 Windows Server 和 Linux,这里我们分别介绍在 Windows 下和 Linux 下安装 MySQL 的具体操作步骤. MySQL安装教程 ...
【接入指南】华为帐号服务Authorization Code模式介绍与接入步骤详解
华为帐号服务提供两种登录授权模式,第一种是Authorization Code模式,第二种是ID-Token模式,这两种模式在使用场景上存在差异.本文将详细介绍Authorization Code模式 ...
python画三维平面-Python 绘制酷炫的三维图步骤详解
通常我们用 Python 绘制的都是二维平面图,但有时也需要绘制三维场景图,比如像下面这样的: 这些图怎么做出来呢?今天就来分享下如何一步步绘制出三维矢量(SVG)图. 八面体我们先以下面这个八面体 ...

模块化封装 --- 双ToKen 实现免登录步骤详解

模块化封装 --- 双ToKen 实现免登录步骤详解相关推荐

最新文章

热门文章