Axios获取请求获取401错误，但刷新页面后成功

Question

当我“自然”地进行api调用时，例如，通过单击对api.mysite.com/api/inventory/uuid/进行获取请求的“我的库存”，它会失败并显示401错误。但是，当我在该页面上并刷新它时，所有功能突然都可以工作（尽管我的.catch方法仍然被触发，提示发生了错误？！） 这是我的代码：

    config = {
        headers:{
            'Authorization' : 'Token ' + localStorage.getItem('token')
        }
    }

这是我的axios获取请求：

        axios.get(this.url, this.config.headers)
            .then(res => {
                this.setState({
                    products: res.data
                })
                if (res.data.length > 0) {
                    if (!res.data[0].is_owner) {
                        this.setState({
                            inventory_owner: res.data[0].user_name,
                            is_owner: res.data[0].is_owner
                        })
                    }
                }
            })
            .catch(res => {
                console.log("error it didnt work "+res.response.data.detail)

            })

虽然我在写这个问题，但我注意到第二个调用不是来自刷新，而是来自componentWillReceiveProps，它与以下代码（大致相同）

    componentWillReceiveProps() {
        const path = this.props.history.location.pathname
        if (path === '/inventory') {
            this.url = 'https://api.mysite.com/api/inventory/'
        }
        else {

            if(this.param1.length>12){
                this.param1 = this.param1
            }
            else{
            this.param1 = path[path.length - 1]
            }
            this.url = 'https://api.mysite.com/api/inventory/' + this.param1
        }
        axios.get(this.url, this.config)
            .then(res => {
                console.log("this work tho")
                console.log("the url "+this.url)
                console.log("the config "+this.config.headers.Authorization)
                this.setState({
                    products: res.data
                })
            })
    }

控制台会为url和config输出相同的值，所以我不确定为什么1个调用失败而另一个成功。