精华内容
下载资源
问答
  • 2020-10-10 17:37:45
    import axios from 'axios';
    import store from '../store';
    import router from '../router';
    import Vue from 'vue';
    
    //设置过期时间
    axios.defaults.timeout = 6000;
    
    //请求拦截
    axios.interceptors.request.use((config)=>{
        //给请求添加token
        if(store.state.token){
            config.headers.authorization = "Bearer " + store.state.token;
        }
        return config
    })
    
    //响应拦截
    axios.interceptors.response.use((res) => {
        return res;
    },
    (err)=>{
        //拦截401登录过期请求,直接跳转登录界面,并提示
        const {response} =err;
        switch(response.status){
            case 401:
                Vue.prototype.$confirm('登录过期,请重新登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    router.replace({
                        name:"login",
                    })
                  }).catch(() => {        
                  });
            break;
            default:
                break;
        }
    })
    export default axios;

     

    更多相关内容
  • 请求拦截和响应拦截

    2021-10-17 19:02:52
    请求拦截 请求拦截器可以在发起ajax请求之前进行一些操作,例如下图的添加token(一般用于做ajax的请求权限,设置在请求头中) 二.响应拦截 响应拦截是在接收到响应后进行的一些操作,例如下图token过期失效了,就让...

    一.请求拦截

    请求拦截器可以在发起ajax请求之前进行一些操作,例如下图的添加token(一般用于做ajax的请求权限,设置在请求头中)

     二.响应拦截

    响应拦截是在接收到响应后进行的一些操作,例如下图token过期失效了,就让强制退出到登录页面,让用户重新登录,重新获取token

     

    展开全文
  • vue配置请求拦截和响应拦截

    千次阅读 2022-02-14 15:27:37
    vue项目中我们可以自定义http请求,这样我们所有的请求都会走同一个 import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' import router from '@/router' import { ...

    背景:
    我们在做后台管理系统时通常会封装统一的http请求,这样方便我们来管理axios请求配置

    1. 我们通常会在请求是定义一个超时时间
    2. 在请求拦截器中做token的:超时、更新、headers请求头的处理
    3. 在响应拦截器中做 请求失败状态时的错误处理和成功直接返回结果。
    import axios from 'axios'
    import { Message } from 'element-ui'
    import store from '@/store'
    import router from '@/router'
    import { getTimeStamp, getRefreshToken, getExpiresIn } from '@/utils/auth'
    const TimeOut = getExpiresIn() // token失效时间
    const refreshTokenTime = TimeOut - 900 // 开始换token的时间
    var refreshToken = 0 // 换token只请求一次标识
    
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
      timeout: 15000 // 定义5秒超时
    }) // 创建一个axios的实例
    
    // 请求拦截器
    service.interceptors.request.use(config => {
      if (store.getters.token) {
        const checkTime = IsCheckTimeOut()
        // console.log(checkTime, '当前使用时间')
        // console.log(checkTime > TimeOut)
        // console.log(refreshTokenTime < checkTime && TimeOut > checkTime)
        if (checkTime) {
          if ((checkTime > TimeOut) && !config.url.includes('/logout')) {
            console.log('登出')
            store.dispatch('user/logout') // 登出操作
            return Promise.reject(new Error('token超时了'))
          } else if ((refreshTokenTime < checkTime && TimeOut > checkTime) && !config.url.includes('/refresh/Token') && refreshToken !== 1) {
            console.log('刷新')
            var params = {
              systemCode: process.env.VUE_APP_CLIENT_ID,
              refreshToken: getRefreshToken()
            }
            refreshToken = 1
            store.dispatch('user/refreshToken', params).then(() => {
              refreshToken = 0
              console.log(store.getters.token, '更新了token')
            })
          }
        }
        config.headers['Authorization'] = `${store.getters.token}`
      }
      return config // 必须返回配置
    }, error => {
      return Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(response => {
      // axios默认加了一层data
      const data = response.data
      //   要根据success的成功与否决定下面的操作
      if (data.success) {
        return data
      } else {
        Message.error(data.message) // 提示错误消息
        return Promise.reject(new Error(data.message))
      }
    }, error => {
      if (error.response && error.response.data && error.response.data.code === 8888) {
        store.dispatch('user/logout') // 登出操作
        router.push('/login')
      } else {
        Message.error(error.message) // 提示错误信息
      }
      return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
    })
    
    // 是否超时
    // 超时逻辑  (当前时间  - 缓存中的时间) 是否大于 时间差
    function IsCheckTimeOut() {
      var currentTime = Date.now()
      if (getTimeStamp()) {
        var timeStamp = getTimeStamp()
        return (currentTime - timeStamp) / 1000
      } else {
        return null
      }
    }
    
    export default service
    
    
    

    工作之余 用博客记录自己 希望有能帮助到各位看官
    如有错误或不全面的地方望各位能提点一二和留下宝贵意见

    展开全文
  • axios的请求拦截和响应拦截

    千次阅读 2021-12-23 00:56:58
    并且把请求拦截和响应拦截,以及请求头携带token给说了一下,老大讲的也是很细致,中间的话,是因为拦截那块token处理的有点的问题,导致只要以获取到数据列表token值就变为undefined,然后讲过一步步的分析,找到...

    1.安装axios

    npm install axios --save

    2.引入模块

    在untils文件夹中创建request.js文件,引入axios模块

    import axios from "axios";

    3.创建axios实例

    // 引入axios
    import axios from 'axios'
    // 引入提示消息组件
    import { Message } from 'element-ui'
    const _axios = axios.create({
      baseURL: process.env.VUE_APP_BASE_API
    })

    axios封装的好处:

    1、方便后期代码的维护,

    2、减少代码量,减少不必要的重复请求响应,

    3、通过配合async await,让代码更加优雅

    把在vue中如何将axios进行封装给说了一下;

    并且把请求拦截和响应拦截,以及请求头携带token给说了一下,老大讲的也是很细致,中间的话,是因为拦截那块token处理的有点的问题,导致只要以获取到数据列表token值就变为undefined,然后讲过一步步的分析,找到了问题,最后也是解决了,这样的话也对我们也是有提升的,让我们知道下次遇到这种情况时候知道怎么处理了

    axios的封装处理

    import axios from 'axios'
    import { Message } from 'element-ui' // Message===this.$message
    import Store from '@/store'
    import Router from '@/router' // Router===this.$router
    const _axios = axios.create({
      baseURL: process.env.VUE_APP_BASE_API
    })
    // 请求拦截
    _axios.interceptors.request.use(
      (config) => {
        if (Store.state.user.token) {
          config.headers.Authorization = `Bearer ${Store.state.user.token}`
        }
        return config
      },
      (error) => {
        /*
        new Promise((resolve,reject)=>{
          reject('错误')
        })
        等效于
        Promise.reject('错误')
        */
    
        return Promise.reject(error)
      }
    )
    // 响应拦截
    _axios.interceptors.response.use(
      (res) => {
        if (res.data.success) {
          // 成功处理
          return res.data
        } else {
          // 失败处理
          // 提示错误信息
          Message.error(res.data.message)
          // 让接口调用执行.catch,中止.then的执行
          return Promise.reject(res.data.message)
        }
      },
      (error) => {
        // console.dir(error)
        if (error.response && error.response.status === 401) {
          // 清除token:vuex中清除
          // Store.commit('user/setToken', '')
          // 清除用户信息:vuex中清除
          // Store.commit('user/setUserInfo', '')
          Store.commit('user/logout')
          // 提示错误信息
          Message.error(error.response.data.message)
          // 跳转到登录页
          // this.$router
          Router.push('/login?redirect=' + window.location.href.split('#')[1])
        }
        return Promise.reject(error)
      }
    )
    export default _axios
    
    展开全文
  • vue请求拦截和响应拦截

    千次阅读 2020-05-18 19:30:44
    0, 0.7)' }) } function endLoading() { //使用Element loading-close 方法 loading.close() } // 请求拦截 设置统一header axios.interceptors.request.use(config => { // 加载 startLoading() if (localStorage....
  • 但是,在传递参数接受数据时,原生的那些简单配置就不太能胜任了。譬如,有些接口需要进行鉴权或者其他操作,返回的数据也需要我们来进行处理。于是,对axios进行一些定制的封装就显得尤为重要了。
  • main.js文件 // 使用ajax请求插件 var VueResource = require('vue-resource') ...// request请求拦截,next响应拦截 request.method = 'POST';//在请求之前可以进行一些预处理配置 // 返回 next((res) =>
  • axios拦截器(请求拦截和响应拦截

    千次阅读 2019-10-11 18:36:09
    axios拦截器分为request请求拦截response响应拦截器。 request请求拦截器:发送请求前统一处理,如:设置请求头headers等。 response响应拦截器:有时候我们要根据响应的状态码来进行下一步操作。 axios....
  • 实现双token,解决token过期存在的并发请求问题
  • 在axios文件夹中添加api,jsconfig.js config.js中 // 引入需要用到的资源,qselement可以百度搜索怎么下载 import axios from "axios"; import qs from "qs"; import { Message, Loading } from 'element-ui';...
  • 今天小编就为大家分享一篇axios的拦截请求响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1、创建axios实例 ... withCredentials: true, // true:在跨域请求时,会携带用户凭证 false:在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie headers: { 'Content-Type': 'application/j
  • vue项目中axios的统一...//设置所有请求的域名前缀 const apiUrl = 'http://xxx.com'; export default{ apiUrl } http.js /** * ajax请求配置 */ import axios from 'axios' import apiURL from './api.js' i...
  • 响应拦截和请求拦截

    千次阅读 2021-04-22 19:06:40
    响应拦截和请求拦截: 1、请求拦截请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。 关于拦截,这里只说原理,前端的请求,最终还是离不开 ajax...
  • 请求拦截器 就是在发送请求的使用进行一些操作。 响应拦截器 就是拦截在响应的时候进行的一些操作。比如 :登录错误返回登录的状态 实现: 1.下载axios npm install --save axios 2.新建utils 文件夹 工具文件夹 3....
  • Axios 是一个基于promise 的一个HTTP库,可以用...拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御 XSRF 安装步骤 npm install axios --save 引入 在main.js中全局引...
  • 记录, 勿下
  • Axios拦截器 ... 添加请求拦截器 Axios.interceptors.request.use(function (config) { 在发送请求之前做些什么 return config; }, function (error) { 对请求错误做些什么 retur...
  • Vue中的请求拦截和响应拦截

    千次阅读 2021-09-11 20:57:07
    大家好,我又来了,我们今天就讲一下什么是请求拦截器,和请求拦截器的作用,好了,多余的话我就不说了,马上开始今天的讲解 开始啦 请求拦截请求拦截器的作用是: 在请求发送前进行一些操作,例如在每个请求...
  • 主要介绍了Vue axios全局拦截 get请求、post请求、配置请求的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • axios请求拦截和响应拦截

    千次阅读 2021-02-26 16:33:54
    拦截器分【请求拦截器】响应拦截器】 参考地址:https://www.jb51.net/article/150014.htm 参考的地址:https://www.jianshu.com/p/7bc7654d4574 请求拦截器的实际应用场景 在进行鉴权的时候;我们每个接口都...
  • 1.请求拦截 在使用axios发送登入请求的时候,可以使用拦截器,给请求头加上自己的token axios.interceptors.request.use(function (config) { flag=false config.headers.Authorization = window.localStorage....
  • 默认你已经创建好了一个react项目 首先我们需要下载axios,我存储用户信息是用react-cookie,你们可以自己选择使用本地存储 npm i axios --save ...如果你已经下载好了axioscookie则需要引入,其中axios是必须
  • 请求拦截器,携带 token 响应拦截器:剥离无效数据、处理 token 失效 导出一个函数,调用 axios 发请求 1. 创建实例-配置基础 URL import axios from "axios"; import store from "@/store"; import router from "@...
  • 1、首先自己新建一个axios文件夹用于存放请求和响应拦截器     2、在main.js中引入axios然后将其挂载到原型链上。   转载于:https://www.cnblogs.com/wasbg/p/11356230.html
  • axios发送请求→axios请求拦截器→服务器→axios响应拦截器→then方法处理响应结果 2.使用代码讲解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,211
精华内容 56,484
关键字:

请求拦截和响应拦截