[ Vue ] 网络请求之 interceptors 实际应用

GitChat 发布于2019-08-22 14:55 / 1353人阅读

摘要：需求分析每个请求都需要携带，所以我们可以使用拦截器，在这里，我们给每个请求都加这样就可以节省每个请求再一次次的复制粘贴代码。

项目背景

最近在项目开发中，遇到下面这样一个问题：

在进行铭感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。

需求分析

每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。

token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。

功能实现

分析完问题后，我们来实现功能

安装axios, 这里我们就赘述怎么安装axios.

在 main.js 注册 axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

注：qs，使用axios，必须得安装 qs，所有的Post 请求，我们都需要 qs,对参数进行序列化。

在 request 拦截器实现

axios.interceptors.request.use(
  config => {
    config.baseURL = "/api/"
    config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
    config.timeout = 2500
    let token = sessionStorage.getItem("access_token")
    let csrf = store.getters.csrf
    if (token) {
      config.headers = {
        "access-token": token,
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }
    if (config.url === "refresh") {
      config.headers = {
        "refresh-token": sessionStorage.getItem("refresh_token"),
        "Content-Type": "application/x-www-form-urlencoded"
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

在 response 拦截器实现

axios.interceptors.response.use(
  response => {
    // 定时刷新access-token
    if (!response.data.value && response.data.data.message === "token invalid") {
      // 刷新token
      store.dispatch("refresh").then(response => {
        sessionStorage.setItem("access_token", response.data)
      }).catch(error => {
        throw new Error("token刷新" + error)
      })
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

GPU云服务器云服务器实际应用深度学习实际应用机器学习实际应用云计算的实际应用

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

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

浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 评论0 收藏0
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层

摘要：其实就是我们开始挂载上去的我们在这里出去，我们就可以在回调里面只处理我们的业务逻辑，而其他如断网超时服务器出错等均通过拦截器进行统一处理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 开始之前随着业务的不断累积，目前我们 ToC 端主要项目，除去 node_modules， bu...

Backache 2019-08-22 18:29 评论0 收藏0
Android网络编程7之源码解析OkHttp前篇[请求网络]

摘要：异步请求当正在运行的异步请求队列中的数量小于并且正在运行的请求主机数小于时则把请求加载到中并在线程池中执行，否则就再入到中进行缓存等待。通常情况下拦截器用来添加，移除或者转换请求或者响应的头部信息。前言学会了OkHttp3的用法后，我们当然有必要来了解下OkHttp3的源码，当然现在网上的文章很多，我仍旧希望我这一系列文章篇是最简洁易懂的。 1.从请求处理开始分析首先OKHttp...

blastz 2019-08-16 10:51 评论0 收藏0
vue axios 简单封装以及思考

摘要：先安装的详细介绍以及用法就不多说了请移步下面是简单的封装一个，在此说明这个方法呢是不一定需要的，根据个人的项目需求吧，也可以直接返回，交给后面另行处理也行。或者根据后端返回的状态，在里面进行处理也行。先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ➡️ https://github.com/axios/axios ...

phoenixsky 2019-04-23 13:19 评论0 收藏0
Vue路由之JWT身份认证

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

he_xd 2019-08-26 11:00 评论0 收藏0