这是一个很奇怪的问题!我正在尝试构建一个在 localstorage
中设置 JWT token 的登录表单。然后其他表单使用该 token 来发布请求。我可以在我的 console.log
中看到 token ,但有时(如 5 次中的 3 次),当我设置 localstorage.getitem('idToken')
,它显示为空。当我从我的 loginUser()
函数中删除 console.log(idToken)
时(actions.js 文件中的代码 - 下面给出),这种行为最明显地发生了。我究竟做错了什么?我的应用程序是使用 React/Redux 构建的。
action.js
export function loginUser(creds) {
const data = querystring.stringify({_username: creds.username, _password: creds.password});
let config = {
method: 'POST',
headers: { 'Content-Type':'application/x-www-form-urlencoded' },
body: data
};
return dispatch => {
// We dispatch requestLogin to kickoff the call to the API
dispatch(requestLogin(creds));
return fetch(BASE_URL+'login_check', config)
.then(response =>
response.json().then(user => ({ user, response }))
).then(({ user, response }) => {
if (!response.ok) {
// If there was a problem, we want to
// dispatch the error condition
dispatch(loginError(user.message));
return Promise.reject(user)
} else {
localStorage.setItem('idToken', user.token);
let token = localStorage.getItem('idToken')
console.log(token);
// if I remove this log, my token is returned as null during post.
dispatch(receiveLogin(user));
}
}).catch(err => console.log("Error: ", err))
}
}
这是我的 POST 请求:
import axios from 'axios';
import {BASE_URL} from './middleware/api';
import {reset} from 'redux-form';
let token = localStorage.getItem('idToken');
const AuthStr = 'Bearer '.concat(token);
let headers ={
headers: { 'Content-Type':'application/json','Authorization' : AuthStr }
};
export default (async function showResults(values, dispatch) {
console.log(AuthStr);
axios.post(BASE_URL + 'human/new', values, headers)
.then(function (response) {
console.log(response);
alert("Your submit was successful");
//dispatch(reset('wizard'));
}).catch(function (error) {
console.log(error.response);
alert(error.response.statusText);
});
});
这个 GET
请求每次都有效,顺便说一句:
getHouses = (e) => {
let token = localStorage.getItem('idToken') || null;
const AuthStr = 'Bearer '.concat(token);
axios.get(BASE_URL + 'household/list', { headers: { Authorization: AuthStr } }).then((response) =>
{
let myData = response.data;
let list = [];
let key =[];
for (let i = 0; i < myData._embedded.length; i++) {
let embedded = myData._embedded[i];
list.push(embedded.friendlyName);
key.push(embedded.id);
}
this.setState({data: list, key: key});
})
.catch((error) => {
console.log('error' + error);
});
}
我已经无计可施了!请帮忙!
最佳答案
localStorage.setItem()
是一个异步任务,有时你在 setItem 之后运行 let token = localStorage.getItem('idToken')
会失败,所以你得到一个空值,所以请稍后再进行 getItem
操作,试一试,它会有所不同:
setTimeout(function() {
let token = localStorage.getItem('idToken');
dispatch(receiveLogin(user));
}, 50);
关于javascript - localstorage.getitem ('key' ) 有时返回 null - 在 react 应用程序中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46445615/