javascript - 使用 React 持续登录？

Question

所以，我目前正在开发一个 MERN 应用程序，该应用程序通过库localstorage成功保存 JWT 令牌，在任何刷新尝试中幸存下来（新用户出现在数据库中，等等，后端都按预期工作）。

问题是，前端 React 应用程序默认'user'设置为'null'容器的状态，因此不一致是导致用户在重新渲染时退出的原因，尽管有 JWT。我已经坚持了一天多，尝试实施各种可能的解决方案，从我的导师那里得到帮助，等等，没有达到预期的结果 - 有人有什么建议吗？

我已经从我的容器中附加了代码以供参考（请原谅我的混乱，我对这整件事感到非常沮丧，无法做很多事情），此外，我还有一堆其他的组件和文件与之交互我的容器以某种方式，现在不会附加它们，但如果有人觉得需要额外的上下文来提供帮助，那么我会这样做。谢谢！

import React, { Component } from "react";
import { getItems } from "../services/items";
import Routes from "../routes";
import Header from "../screens/Header";
import { verifyToken } from '../services/auth'

export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      items: [],
      isLoggedIn: false
    };
  }

  async componentDidMount() {
    // const user = await verifyToken();
    // if (user) {
    try {
      const items = await getItems();
      this.setState({
        items,
        isLoggedIn: true
      });
    }
    catch (err) {
      console.error(err);
    }
  }


  addItem = item =>
    this.setState({
      items: [item, ...this.state.items]
    });

  editItem = (itemId, item) => {
    const updateIndex = this.state.items.findIndex(
      element => element._id === itemId
    ),
      items = [...this.state.items];
    items[updateIndex] = item;
    this.setState({
      items
    });
  };

  destroyItem = item => {
    const destroyIndex = this.state.items.findIndex(
      element => element._id === item._id
    ),
      items = [...this.state.items];
    if (destroyIndex > -1) {
      items.splice(destroyIndex, 1);
      this.setState({
        items
      });
    }
  };

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

  //verifyUser = user => (localStorage.getItem('token')) ? this.setState({ user, isLoggedIn: true }) : null

  clearUser = () => this.setState({ user: null });

  render() {
    // const token = localStorage.getItem('token');
    // console.log(token)
    const { user, items } = this.state;
    return (
      <div className="container-landing">
        <Header user={user} />
        <main className="container">
          <Routes
            items={items}
            user={user}
            setUser={this.setUser}
            addItem={this.addItem}
            editItem={this.editItem}
            destroyItem={this.destroyItem}
            clearUser={this.clearUser}
          //verifyUser={this.verifyUser}
          />
        </main>
      </div>
    );
  }
}

标签： javascriptreactjsauthenticationpersistentmern