Javascript 一旦我刷新，登录用户数据就不会持久

您好，我正在使用express进行后端身份验证，这些是我在前端的登录功能/控制器

export const signInUser = async credentials => {
    console.log('this is for the signInUser', credentials)
  try {
    const resp = await api.post('/sign-in', credentials)
    localStorage.setItem('token', resp.data.token)
    return resp.data
  } catch (error) {
    throw error
  }
}

    onSignIn = event => {
        event.preventDefault()

        const { history, setUser } = this.props
        signInUser(this.state)
            .then(res => setUser(res.user))
            .then(() => history.push('/Home'))
            .catch(error => {
                console.error(error)
                this.setState({
                    loginUsername: '',
                    loginPassword: '',
                })
            })
    }

setUser = user => this.setState({ user })

这是我在后端的登录控制器

const signIn = async (req, res) => {
  try {
    console.log('hello' ,req.body);
    const { loginUsername, username, loginPassword } = req.body;
    const user = await User.findOne({
      where: {
        username: loginUsername
      }
    });
    console.log('this is the user', user)
    if (await bcrypt.compare(loginPassword, user.dataValues.password_digest)) {
      const payload = {
        id: user.id,
        username: user.username,
        password: user.password
      };
      const token = jwt.sign(payload, TOKEN_KEY);
      return res.status(201).json({ user, token });
    } else {
      res.status(401).send("Username or Password is invalid- try again.");
    }
  } catch (error) {
    return res.status(500).json({ error: error.message });
  }
};

---

问题是用户的状态在刷新时不会持续，但我的本地存储中仍然有json webtoken，当我发出post请求甚至注册时，这是一个问题，因为我正在重定向到主页并丢失用户状态。任何帮助都将不胜感激

从您的标签中，我注意到您正在使用

React

，因此解决方案很简单

您可以为您的应用程序提供一个

GlobalAuthManager

上下文，该上下文将以最高级别包装所有组件！在

之后，如下所示：

<React.StrictMode>
  <GlobalAuthManager.Provider value={{authData}}>
    <App />
  </GlobalAuthManager.Provider>
</React.StrictMode>

2。在后端有一个
/getUserData
端点：

您需要在后端有一个
/getUserData
端点，才能基于令牌检索用户数据

3。在应用程序安装中调用
/getUserData
：

在应用程序中的每件事之前，如果您在localstorage或cookie存储中找到令牌，则需要调用此端点。因此，如果您在
componentdismount
或
useffect（（）=>{…}，[]）
中运行此操作，则会起作用

4。在上下文中存储用户数据和状态：

调用
/getUserData
后，如果您拥有有效的令牌（我指的是未过期的令牌或未中断和编辑的令牌），您将获得用户数据，您需要做的是将其存储在
GlobalAuthManager
中，并将其提供给您的全局应用程序组件

之后，您可以使用您的用户数据，您可以决定在导航栏中显示登录或注册按钮，或者禁用/启用评论部分，例如，基于您的用户数据

总结：
因此，关键是你必须有一个
GlobalAuthManager
，只有一个目的，那就是在你的应用程序中运行每一件事情之前，它都在顶级运行，并根据本地存储或cookie存储提供的令牌为你获取用户数据

之后，您可以根据用户是否登录来管理应用程序状态
 刷新时，不会删除localStorage，因此您可以访问存储的令牌。但是任何其他信息都应该从后端发送到前端。后端能否成功发送用户数据？是的，身份验证和从后向前发送用户数据工作正常。