主页 / 网络编程 /

浅谈Vue网络请求之interceptors实际应用

网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了浅谈Vue网络请求之interceptors实际应用，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧

项目背景

最近在项目开发中，遇到狼蚁网站SEO优化这样一个问题

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

需求分析

  1. 每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。
  2. 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('aess_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'aess-token': token,
    'Content-Type': 'application/x--form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x--form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

在 response 拦截器实现

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：React组件中的this的具体使用 下一篇：Node.js中DNS模块学习总结

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by