javascript - 刷新后登录用户数据不会保留

Question

嗨，我正在使用 express 进行后端身份验证，这些是我在前端的登录功能/ Controller 。

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 })

这是我在后端的登录 Controller

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，当我发出帖子请求甚至注册时，这是一个问题，因为我重定向到主页并丢失了用户状态。任何帮助，将不胜感激!

Answer 1

从你的标签中，我注意到你正在使用 React ，所以解决方案很简单!
您可以为您的应用程序创建一个 GlobalAuthManager 上下文，它将在最高级别包装所有组件!在 <React.strictMode> 之后，如下所示:

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

正如您可能猜到的，这将是一个上下文!这将为您提供所有组件的用户数据!
模式:
1. 存储代币:
当您的用户登录到您的应用程序时，您会收到一个 token (在您的响应或响应 header 中)，您需要将 token 值存储在 localstorage 中，或者更好地存储在 cookie 存储中(有很多关于它为什么的文章) ，一个是 here 。
2. 在后端有一个 /getUserData 端点:
您需要在后端有一个 /getUserData 端点以根据 token 检索您的用户数据
3. 在应用挂载中调用/getUserData:
在您的应用程序中的每件事之前，如果您在 localstorage 或 cookie 存储中找到 token ，则需要调用此端点。所以如果你在你的 componnetDidMount 或 useEffect(() => { ... }, []) 中运行它，那就行了!
4. 在上下文中存储您的用户数据和状态:
在你调用 /getUserData 并且你有一个有效的 token (我的意思是没有过期的 token 或没有中断和编辑的 token )之后，你会得到你的用户数据，你需要做的是你需要将它存储在你的 GlobalAuthManager 中并将其提供给您的 Global App 组件!
之后，您可以使用您的用户数据，您可以决定在导航栏中显示登录或注册按钮，或者根据您的用户数据禁用/启用评论部分!
包起来:
所以关键是你必须有一个 GlobalAuthManager 只用于一个目的，在它在你的应用程序的顶层运行的每一件事之前，并根据提供的来自 localstorage 或 cookie 存储的 token 获取你的用户数据!
之后，您可以根据您的用户是否登录来管理您的应用程序状态!