登录后无法重定向

Posted 2023-02-19

【中文标题】登录后无法重定向

【英文标题】：Not able to redirect after logging in

【发布时间】：2021-12-23 01:20:01

【问题描述】：

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

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

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

【问题讨论】：

什么是private_component？

【参考方案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`));

这实际上只是伪代码，因此请原谅可能无法完全正常工作的任何错误，但希望它能够传达这个想法。