axios拦截器拦截失败

Question

我在做一个jwt认证的功能.想要每次请求的时候带上一个后台传回来的token.所以我在main.js里加了个拦截器.想在每一次请求的时候在header里带上我的token.但是拦截器只在某一部分的请求.在某一些请求的header中加token.在有一些请求里又不能加token.我想问下怎么解决这个问题？我也尝试了在单独请求前设置header.依然没效果.请各位大佬指点迷津

1.我在main.js里加了拦截器

2.这是正常可以拦截.已经在头上加上了token的请求

3.但是在某些请求的时候就没有token

顺便说一下.如果我把这个请求路径换一下或者故意改成错的.他就能加到我的请求上.所以我在怀疑是不是同步异步的问题

第一次提问.感谢解惑

Answer 1

这得看代码才能解决，基本上是代码问题。建议将 axios 单独封装成 fetch() 并将配置统一在一个地方, 然后每次发的请求都走 fetch 确保都被拦截到

export default function fetch(options) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            // 所有请求都会带上这些配置
            headers: {
                'Content-Type': 'application/json'
            },
            timeout: 30 * 1000 // 30s 超时
        });

        // 发起请求时,会执行该方法
        instance.interceptors.request.use(options => {
            //...
            return options
        }, err => {
            return reject(err)
        })

        //接收到后台的数据时执行的方法
        instance.interceptors.response.use(response => response, err => resolve(err.response))

        instance(options)
            .then(response => { // 成功请求
                resolve(response)
            })
            .catch(error => { // 失败请求
                console.error('请求异常：' + error)
                reject(error)
            })
    })
}

Answer 2

你看一下是不是token获取的方式不行，这样试试：

const token = localStorage.getItem("token");

保存的时候是使用localStorage.setItem("token",xxx)

Answer 3

1.建议封装下
2.建议在api配置的时候加上参数用来决定是否在header中带token

export const API = {
    login:{
        url: '////',
        method: 'post',
        token: true
    },
    ...
}

我们对请求做了封装，可以传一个api接口对象，在拦截器里在对最终对传参序列化

3.可以把token存在缓存，判断没有时再去storage中取