使用localStorage进行React auth

Question

下面的代码适用于登录，但一开始我一直收到一个未定义的错误，我认为这可能是所有事情的时间问题，本地存储setItem花费了太长时间，试图设置延迟，但无法管理。

async function login(username, password) {
const response = await axios.post(API_URL + "signin", {
username,
password
});

if (response.data.accessToken && typeof window !== 'undefined') {
localStorage.setItem("user", JSON.stringify(response.data));
}

return response.data;
}

Answer 1

如果它有效与否，你能尝试一下吗？

async login(username, password) {
axios.post(API_URL + "signin", {
username, password
})
.then(response => {
if (response.data.accessToken && typeof window !== 'undefined') {
localStorage.setItem("user", JSON.stringify(response.data));
}
})
return response.data;
}

Answer 2

如果没有看到您收到的确切错误，很难说是肯定的，但我认为有问题的是response.data.accessToken，因为如果您试图在data为null或未定义时访问data的accessToken属性，则会导致错误。

我的建议是，在访问accessToken属性之前，添加一个检查以确保response.data是真实的。例如，

if(response.data && response.data.accessToken && ...) {

还有其他方法可以处理这个常见问题，例如lodash的get方法或可选的链接。

Answer 3

问题是我加载用户名的地方本地存储还没有设置，所以系统以未定义的响应，为了解决这个问题，只需设置一个if语句，告诉用户可用时的详细信息