登录后无法重定向

Question

我正在开发一个应用程序，登录后我们将重定向到受保护的路由，但我面临一个问题，当我输入用户名和密码并点击登录时，它成功地调用了API并在localstorage中设置了令牌，但它没有重定向到受保护的路由，但是当我再次输入凭据时，它工作正常。以下是我认为有问题的代码：

const submitAction = (data) => {
dispatch(login(data));
history.push(`${private_component}`);
};

数据基本上是用户名和密码，我使用Redux，这就是为什么要调用API并将令牌存储在localstorage中并将用户相关数据存储在Redux中的登录操作。我猜history.push在令牌存储到localstorage之前被调用。有人能给我建议解决方案吗？

Answer 1

您可能希望login操作返回Promise，因此您可以等待API调用完成。可能发生的情况是，你在上面的线路结束之前就推到了受保护的路由，所以用户实际上并没有登录。这也解释了为什么它第二次起作用。另一种可能性是将重定向转移到登录操作本身，只要它是在收到响应并用户登录后处理的

export function login = (username, password) => (
new Promise((resolve, reject) => {
// your code
fetch('wherever', {whatever: 'config'} ).then(r => r.json()).then(d => resolve(d)).catch(e => reject(e))
}
) 

这样的东西可以让你做

const submitAction = (data) => {
dispatch(login(data))
.then(history.push(`${private_component}`));
}

这实际上只是一个伪代码，所以请原谅任何可能不起作用的错误，但希望它能让大家明白这一点。