无法在React中的axios中将用户名和密码设置为默认身份验证

Question

我是ReactJS的新手，正在尝试在API调用中设置默认的auth值。我使用基本的身份验证进行登录，这是我使用的代码：

axios.defaults.auth.username = process.env.REACT_APP_AUTH_USERNAME
axios.defaults.auth.password = process.env.REACT_APP_AUTH_PASSWORD
axios.defaults.headers["user_token"] = JSON.parse(localStorage.getItem("uid"))

当服务器启动(yarn start(时，会抛出以下错误：

fakebackend_helper.js:700 

Uncaught TypeError: Cannot set properties of undefined (setting 'username')
at ./src/helpers/fakebackend_helper.js (fakebackend_helper.js:700:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/store/DropDownList/saga.js (reducer.js:28:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/store/sagas.js (reducers.js:59:1)
at options.factory (react refresh:6:1)

当我像这样使用auth时，它非常有效。

axios
.post(url.UPDATE_PROGRESS_NOTE_BY_STAFF, data, {
headers: {
user_token: JSON.parse(localStorage.getItem("uid")),
},
auth: {
username: process.env.REACT_APP_AUTH_USERNAME,
password: process.env.REACT_APP_AUTH_PASSWORD,
}
})
.then(response => {console.log(response)})
.catch(err => {console.log(err)})
}

在axios.defaults中，还有auth.username和密码选项来创建它们作为默认值，这就是为什么我使用它而不是像axios.defaults.headers.common["Authorization"] = "Basic" + token那样，但没有找到正确的方法来设置值。

请指导我。

Answer 1

AxiosDefaults类型将auth定义为

auth?: AxiosBasicCredentials;

这意味着它可能是未定义的(并且可能是默认的(。

您只需设置整个auth对象

axios.defaults.auth = {
username: process.env.REACT_APP_AUTH_USERNAME,
password: process.env.REACT_APP_AUTH_PASSWORD,
}