后续请求都要带上 token ?

genedna 发布于2019-08-23 11:47 / 921人阅读

摘要：正经写文章平时开发里，先请求一个，然后后面的请求都要带上这个来进行认证或者授权，是一个常见的需求那要怎么搞呢还是一个先后，控制异步流程的的问题，就是先拿到再进行后面的请求就好了。

正经写文章

平时开发里，先请求一个 token ，然后后面的请求都要带上这个 token 来进行认证或者授权，是一个常见的需求

那要怎么搞呢？还是一个先后，控制异步流程的的问题，就是先拿到 token 再进行后面的请求就好了。相信 promise 大家已经用得很泛滥了：

let tokenPromise = new Promise(...) // 拿到 token
tokenPromise.then()... // 拿到 token 后去拿数据1
tokenPromise.then()... // 拿到 token 后去拿数据2
tokenPromise.then()... // 拿到 token 后去拿数据3
...

如果向上面这样组织那就完全没问题了。但是实际上一般也不会这样写吧，好蠢。。。但是计算机就是用来帮我们做这种蠢的重复性工作的，我们稍微变通一下，原理还是一样，只是代码写好看或者写少一点就好了

假设我们都是用 XMLHttpRequest 来发起请求的话（谁能告诉我为什么XML是大写Http却不是。。。），我们可以在 xhr.send() 上做点手脚，把这个函数再包多一层，在里面叫它帮我们调用 tokenPromise.then()。先做好准备工作：

首先我先用 easy-mock 模拟了两个接口，一个返回 token，一个返回 message

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token
{
  "data": {
    "token": "a_mock_token"
  }
}

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message
{
  "data": {
    "message": "你好"
  }
}

然后用 jQuery 的 ajax 发请求（只要是用了 XMLHttpRequest 对象，都ok）：

接下来可以写代码了

// 先拿 token
var tokenPromise = new Promise((resovle, reject) => {
  // 清除缓存里的token
  localStorage.removeItem("token")
  $.ajax({
    type: "GET",
    url: "https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token",
    success(res) {
      let token = res.data.token
      localStorage.setItem("token", token)
      resovle(token)
    },
    fail(err) {
      reject(err)
    }
  })
})

// 对 xhr.send 再包多一层
var originSend = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function () {
  var args = arguments
  var self = this
  var fn = function () {
    var token = localStorage.getItem("token")
    // 假如把 token 放在请求头里
    self.setRequestHeader("token", token)
    console.log("后续请求token: ", token)
    originSend.apply(self, args)
  }
  // tokenPromise resolved 了才会执行后续的请求
  tokenPromise.then(fn)
}

// 后续其他请求， Network 看一下，请求已经带上 token 了
$.ajax({
  type: "GET",
  url: "https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message",
  success(res) {
    console.log(res)
  },
  fail(err) {
    console.log(err)
  }
})

完整的代码

当然这只是一个大概的思路，你要用 axios 而不用 $.ajax ，或者是在小程序里对 wx.request() 包多一层而不是对 xhr.send() 包多一层都是类似的。希望我们能写出更多野鸡的写法

自言自语

最近在认真学习 promise，觉得史上最易读懂的 Promise/A+ 完全实现这篇文章真的挺棒的，起码能看懂一点了

然后有看到 fly （一个类似于axios的ajax库）直接就把我们上述这个先请求 token 的功能写在文档里了，并且这个作者还写了一个 Ajax-hook 来拦截 ajax 请求

所以就强行给博客拔拔草 :D

GPU云服务器云服务器没有token的请求怎么防止ddos 服务器后续扩容阿里云服务器到期后续费阿里云服务器过期后续费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97458.html

App架构设计经验谈:接口的设计

摘要：安全机制的设计现在，大部分的接口都采用架构，最重要的一个设计原则就是，客户端与服务器的交互在请求之间是无状态的，也就是说，当涉及到用户状态时，每次请求都要带上身份验证信息。 App与服务器的通信接口如何设计得好，需要考虑的地方挺多的，在此根据我的一些经验做一些总结分享，旨在抛砖引玉。安全机制的设计现在，大部分App的接口都采用RESTful架构，RESTFul最重要的一个设计原则就...

zombieda 2019-06-24 17:49 评论0 收藏0
jwt前后端整合方案

摘要：到这里，基于的前后端分离实现方案就搞定啦四关于的一些思考实际上，在使用的过程中有一个比较致命的缺点，就是一旦签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。结语以上是关于基于的前后端分离实现方案的总结和思考。一、jwt是什么 JWT全称， JSON Web Token，是一个以JSON为基准的标准规范。举例：服务器认证以后，生成一个 JSON 对象，发回给用户，就像下...

nevermind 2019-08-23 17:11 评论0 收藏0
Vue路由之JWT身份认证

摘要：路由之身份认证一身份认证简介是目前最流行的跨域身份验证解决方案，相较于机制，服务器就不需要保存任何数据了，也就是说，服务器变成无状态了，从而比较容易实现扩展。 Vue路由之JWT身份认证一、JWT身份认证简介 JSON Web Token（JWT）是目前最流行的跨域身份验证解决方案，相较于session机制，服务器就不需要保存任何 session 数据了，也就是说，服务器变成无状态...

he_xd 2019-08-26 11:00 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

worldligang 2019-08-22 15:53 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（上）

摘要：下面也是以模块的模块集为例，可以发现和路由有一些不同就是这里为了防止模块跟全局耦合，运用函数式编程思想类似于依赖注入，将全局的实例作为函数参数传入，再返回出一个包含的对象，这个导出的对象将会被以模块名命名，合并到全局的集中。前言 web前端发展到现代，已经不再是严格意义上的后端MVC的V层，它越来越向类似客户端开发的方向发展，已独立拥有了自己的MVVM设计模型。前后端的分离也使前端人...

pepperwang 2019-08-02 10:03 评论0 收藏0