javascript - 刷新页面时，localStorage 值未保留在浏览器中（反应）

Question

这段代码运行完美。当我第一次登录时，它会成功登录，并且用户的令牌设置在 redux 商店的 localStorage 中。下一次，如果我重新加载页面，令牌会从 localStorage 成功检索，即使我在下面给出的 try-catch 块中控制台记录该令牌

......code......
try {
      let token = localStorage.getItem("auth-token");
      console.log(token);
......code......

令牌打印在控制台中并且用户登录。但是如果我再刷新一次，令牌值在 localStorage 中自动未定义并且用户被注销。那么如何保留localStorage中的值。

import React, { useEffect } from "react";
import "./components/styles/App.scss";
import Navbar from "./components/layouts/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Developers from "./components/developers/Developers";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import Home from "./components/home/Home";
import axios from "axios";

// redux
import { actionType } from "./redux/auth/authActions";
import { connect, useDispatch } from "react-redux";
import { AUTH_FAIL, IS_AUTHENTICATED, LOADING } from "./redux/auth/authTypes";
import store from "./redux/store";

const App = ({ actionType }) => {
  const dispatch = useDispatch();

  const checkLoggedIn = async () => {
    try {
      let token = localStorage.getItem("auth-token");
      console.log(token);
      if (token === null) {
        localStorage.setItem("auth-token", "");
        token = "";
      }
      const config = {
        headers: {
          "x-auth-token": token,
        },
      };
      const tokenRes = await axios.post("/api/auth/tokenIsValid", null, config);
      if (tokenRes.data) {
        // dispatch(actionType(LOADING, null));
        const res = await axios.get("/api/auth", config);
        dispatch(actionType(IS_AUTHENTICATED, res.data));
      }
    } catch (e) {
      console.log("auth fail");
      // dispatch(actionType(AUTH_FAIL, null));
    }
  };
  checkLoggedIn();

  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path={"/"} component={Home} />
        <Route exact path={"/developers"} component={Developers} />
        <Route exact path={"/login"} component={Login} />
        <Route exact path={"/register"} component={Register} />
      </Switch>
    </Router>
  );
};

export default connect(null, { actionType })(App);

标签： javascriptreactjslocal-storage