zoukankan      html  css  js  c++  java
  • vue请求拦截-统一配置请求头

    /* 直接引入这个文件作为xios 
    import axios from './http' main.js里也要引入
    */
    // import Vue from 'vue'
    import { Toast } from 'vant';
    import axios from "axios"
    import { restUrl as baseUrl } from '@/config'
    import { list } from '@/common/js/url-white-list'
    import { codeHeaders, encryptBody } from '@/common/js/sm.js'
    import router from '@/router'
    import store from '../store'

    axios.defaults.withCredentials = true
    axios.defaults.baseURL = baseUrl


    axios.interceptors.request.use(
    config => {
    let newConfig = config;
    let token = window.localStorage.getItem('access_token')
    if (process.env.VUE_APP_ENCRYPTION === '1') {
    newConfig = codeHeaders(config)
    newConfig = encryptBody(newConfig)
    } else {
    newConfig = config;
    }

    // 不需要token的请求
    for (const i of list) {
    if (newConfig.url.indexOf(i) != -1) {
    return newConfig;
    }
    }
    //设置请求头
    newConfig.headers['Authorization'] = 'Bearer ' + token
    //是否正在刷新token true延迟请求,不是就返回正常的请求头
    const isRefresh = store.state.isRefresh
    if (isRefresh) {
    return new Promise((resolve) => {
    setTimeout(() => {
    let token = window.localStorage.getItem('access_token')
    newConfig.headers['Authorization'] = 'Bearer ' + token
    resolve(newConfig);
    }, 1000);
    })
    } else {
    return newConfig;
    }
    },
    error => {
    // store.dispatch('hideLoading'); //本来是说要加统一的请求loading的 后面各方面考虑没有加
    return Promise.reject(error);
    })

    axios.interceptors.response.use(
    response => {
    // store.dispatch('hideLoading');
    return response
    },
    error => {
    // store.dispatch('hideLoading');
    // // 非法的身份或者身份过期,需要重新登录 // 先退出,在登录 && error.response.config.url.indexOf('/ycloud-user/users/logOut') === -1)
    if (error.response.status !== 400) {
    if (error.response.status === 401) {
    router.push('/login');
    } else if (error.response.status === 403) { // 未授权访问,给用户提示或路由到一个其他错误页面
    router.push('/login');
    } else if (error.response.status === 500 && error.response.data.error == 'Internal Server Error') { // 未授权访问,给用户提示或路由到一个其他错误页面
    if (error.response.data.message === '原始口令校验失败。') {
    Toast({ message: '原始密码输入错误', duration: 2000 });
    } else if (error.response.data.message === '原始口令与新口令不能一样。') {
    Toast({ message: '旧密码和新密码不能重复', duration: 2000 });
    } else {
    return Promise.reject(error);
    }
    } else if (error.response.status === 500 || error.response.status === 503) {
    router.push('/error');
    } else if (error.response.status === 504) {
    router.push('/error');
    Toast({ message: '请求超时,请刷新页面', duration: 2000 });
    } else {
    // Toast({message:'请求异常',duration:5000});
    router.push('/error');
    return Promise.reject(error);
    }
    } else {
    return Promise.reject(error);
    }

    })


    export default axios
  • 相关阅读:
    5的阶乘以及任意输入一个数的阶乘
    继入门程序后的第一篇函数调用的小程序 比较两数大小
    计算机网络01-计算机网络与因特网
    2021春招冲刺-1227 数组去重 | 响应式布局 | 媒体查询 |浏览器帧
    2021春招冲刺-1225 TCP与UDP | 单例模式 | 回流与重绘
    2021春招冲刺-1223 进程线程的通信 | 字符串是否有效 | 数组转换与展平
    2021春招冲刺-1221 进程与线程的区别 | 进程的切换 | 单链表是否相交 | 元素水平/垂直居中的方式
    左边固定,右边自适应解决方案
    mock 模拟数据在框架中的简单使用
    一个页面从输入url到加载到内容,这个过程经历了什么
  • 原文地址:https://www.cnblogs.com/dmwcq/p/11180780.html
Copyright © 2011-2022 走看看