axios——有些接口需要传递token，有些接口不需要传递token的处理方法_jiey0407的博客-程序员宅基地_axios传递token

技术标签： 面试  react.js  前端  html  javascript  

今天在写后台管理系统时，遇到一个问题：
在这里插入图片描述
请求接口时，接口先是报500服务器错误，然后又报跨域问题。

问过后端，后端说请求时不要加token。

由于我的其他接口都是要求带有token的，因此需要对axios拦截器单独进行处理。

下面对antd框架中的部分内容修改如下：

1.request.js文件——添加一个新的axios请求

const instancePermission = axios.create({
    timeout: 20000,
    baseURL: BASE_URL,
    withCredentials: false,
    xsrfHeaderName: xsrfHeaderName,
    xsrfCookieName: xsrfHeaderName,
    headers: {
        "accept-language": "zh-Hans"
    }
})

2.requestPermission——设置请求部分

async function requestPermission(url, method, params, config) {
    switch (method) {
        case METHOD.GET:
            return instancePermission.get(url, { params, ...config })
        case METHOD.POST:
            return instancePermission.post(url, params, config)
                // request('/api/create', 'POST', body, { params: { name: 'abc' } }) 拼接参数
        case METHOD.PUT:
            return instancePermission.put(url, params, config)
        case METHOD.DELETE:
            return instancePermission.delete(url, { params, ...config })
        default:
            return instancePermission.get(url, { params, ...config })
    }
}

3.loadInterceptors——设置拦截器部分

3.1 设置请求拦截器部分

instancePermission.interceptors.request.use(
    config => onFulfilled(config, options, true),
    error => onRejected(error, options)
)

3.2 设置响应拦截器部分

instancePermission.interceptors.response.use(
    response => onFulfilled(response, options),
    error => onRejected(error, options)
)

4.导出requestPermission

export{requestPermission}

5.在axios-interceptors.js文件中做如下处理

onFulfilled(config, options,flag) {
    var params = {...config };
    const { message } = options
    const { url, xsrfCookieName, headers } = params;
    if (!flag&&headers.Authorization && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
        message.warning('认证 token 已过期，请重新登录')
    }
    if (!flag && headers.Authorization && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
         message.warning('认证 token 已过期，请重新登录')
    }
    if (!flag) {
         params.headers['Authorization'] = Cookie.get(xsrfHeaderName)
    }
    return params
},

完成！！！

注意：要重新运行代码，有时候还需要清理一下缓存才能看到实际的效果。

总结

写到这里也结束了，在文章最后放上一个小小的福利，以下为小编自己在学习过程中整理出的一个关于 前端开发 的学习思路及方向。从事互联网开发，最主要的是要学好技术，而学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯，更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲，需要更及详细的学习思维导图的 点击我的GitHub免费获取。
还有免费的 高级web全套视频教程 前端架构 H5 vue node 小程序 视频+资料+代码+面试题！

全方面的web前端进阶实践技术资料，并且还有技术大牛一起讨论交流解决问题。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiey0407/article/details/123154539

智能推荐

干货 | 华尔街留下的指标之王（附代码展示）_weixin_34232744的博客-程序员宅基地

阅读原文：华尔街留下的指标之王（附代码展示）壹 . 写在前面的话有人认为价格围绕价值上下波动，研究投资标的内在价值，于是就出现了基本面派；有人为价格反映了一切，所有的信息（包括基本面）都反映到了盘面价格中，于是就有了技术面派；图片来源：宽客在线（quant.la）从技术面派的角度讲：有人认为市场价格运动的方式是随机的，下一刻的价格涨跌的概率各是50%。于是就出现了被动仓位管理的网格类交易策略...

兄弟组件之间利用vuex传值_Zhang__Hao__的博客-程序员宅基地_vuex兄弟组件传值

兄弟组件之间利用vuex传值store.js文件import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ queryId: '', }, mutations:{ save_queryId(state, queryId) { state.queryId = queryId

小程序canvas绘制多行文本，兼容中英文数字符号等_门前小小小树的博客-程序员宅基地

关于用canvas绘制多行文本，网上大多方案都是根据字体大小和每行长度计算每行绘制多少个字，再换行。但是这种方式遇到有英文和数值等非中文字，计算就会不对的。下面是在微信小程序中实现的方案可以兼容中英文数字符号等各种字符，主要是通过遍历内容动态计算每行的字数，再换行绘制。// 方法定义/** * @description 绘制文本自动换行,兼容中英文数字 * @author hyf 2021.1.26 * @param obj = { * text:''//绘制文本 *

搜索问题之状态空间搜索（状态压缩+记忆化搜索+ BFS）_Wayward：)的博客-程序员宅基地

1. 前言之前介绍的回溯法常用于 解空间的搜索 问题，即 找到一个或者所有满足约束条件的解，它通常是将解空间组织成树或者图，然后进行DFS（深度优先遍历）并注意在搜索的时候进行 剪枝操作。但是状态空间搜索则是需要 找到一条从起始状态到终止状态的路径，其一般需要考虑一下问题：状态的表示，即我们怎样表示一个状态。状态的转移，即通过研究初始状态和目标状态的 差别 ，我们定义怎样的操作来进行状态...

Mac下使用rz、sz远程上传下载文件的配置记录_weixin_33869377的博客-程序员宅基地

 rz、sz是linux系统上传和下载文件的工具，非常好用！需要注意的是：单独使用rz进行上传文件会有两个问题：上传中断、上传文件变化（md5不同），解决办法是上传是用rz -be，并且去掉弹出的对话框中“Upload files as ASCII”前的勾选（这是rz上传的坑：在对话框内选择上传文件时，记住不要勾选下方的"发送文件到ASCII",否则上传的文件会有问题！）-a, –ascii -...

UGUI ScrollRect使用_weixin_30566063的博客-程序员宅基地

第一次在正式项目里用UGUI，遇到不少问题。其中ScrollRect是比较让人恼火的。看了很多网上已有教程和原代码，终于做出满足项目需求的样子来了。简单分享一下。如有错误的地方，希望大家可以指出，一起进步！制作一个滚动列表，首先就会想到ScrollRect这个组件。但与NGUI的不同，NGUI的UIScrollView把很多功能都写好了，或者都写到滚动列表专用的几个脚本里。但UGUI的各...

随便推点

51单片机c语言位寻址,求助，如何定义51单片机中位寻址的位为标志_午后茶语的博客-程序员宅基地

还找了个高手，要了个标准C定义位的，据说用到联合、枚举、结构体啥的，能用到所有用C编程的MCU上，经测试使用无问题，同大家分享一下。/**********************************************************************标准C位定义*********************************************************...

fastJson 解析对象_String峰峰的博客-程序员宅基地_fastjson解析对象

fastJson 解析对象try { String result =[{"time":"2019-11-29T09:02:29.660Z","timestamp":"2019-11-29T09:02:29.660Z","trade_id":"1859648789","price":"47.38","size":"0.009772","side":"sell"}]； ...

亚马逊测评的利润都有哪些？赚钱吗？有没有风险？_知识博客的博客-程序员宅基地

做亚马逊测评的朋友们都知道，任何项目都是存在fx的。亚马逊测评也是不例外的。那么做亚马逊测评对于测评者来说最大的fx就是f号。f号后我们的资金也面临这一个被冻结的状态。那么该如何让规避这种fx呢？今天我们就主要讲讲这个问题。现在的亚马逊测评市场肯定是没有办法和刚开始哪会的sc来做对比的。亚马逊刚刚进入中国sc的时候确实造就了一大批的财富神话，那时候在浙江的虎门婚纱sc批发一件量产的婚纱敬酒服也才20－30人民币，然后再亚马逊转卖可以倒卖299m元一件；利润率高达1000%。而且那时候做测评也没有太多的fk

docker-registry的定制和性能分析_PaaS小魔仙的博客-程序员宅基地

docker-index·        Web UI·        Meta-data元数据存储（附注、星级、公共库清单）·        访问认证·        token管理docker-registry·        存储镜像、以及镜像层的家族谱系·        没有用户账户数据·        不知道用户的账户和安全性·        把安全和认证委托给docker-hub来做，...

Maven中-DskipTests和-Dmaven.test.skip=true的区别_qq_36484241的博客-程序员宅基地

在使用mvn package进行编译、打包时，Maven会执行src/test/java中的JUnit测试用例，有时为了跳过测试，会使用参数-DskipTests和-Dmaven.test.skip=true，这两个参数的主要区别是：-DskipTests，不执行测试用例，但编译测试用例类生成相应的class文件至target/test-classes下。-Dmaven.test.skip=t...

Gym-102220J Time Limit（水题）_井中月_笼中雀的博客-程序员宅基地

题目链接：https://codeforces.com/gym/102220/problem/J#include"iostream"#include"cstdio"#include"stdlib.h"#include"cmath"#include"cstring"#include"cstdlib"#include"vector"#include"stack"#include"queue"#include"set"#include"map"#include"algorithm"#in

推荐文章

热门文章

相关标签