reactjs钩子中页面刷新时丢失身份验证状态

Question

当我使用有效凭据登录时，服务器将 JWT 发送到浏览器，我将此 JWT 存储在 localstore 页面重定向到主页一切正常，并且在主页中我有 loadUser 函数，它向服务器发送请求以获取有效用户的用户详细信息，但是当我刷新页面时，它的主页永远不会执行，因为身份验证状态返回 false 并且页面从主页重定向到登录页面 这是 App.js

 import React, { Fragment } from "react";
        import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
         import Navbar from "./components/layout/Navbar";
       import Home from "./components/pages/Home";
        import Login from "./components/auth/Login";
        import PrivateRoute from "./components/routing/PrivateRoute";
      import "./App.css";
       const App = () => {
      return (
            <AuthState>
              <Router>
            <Fragment>
              <Navbar />
              <div className="container">
                <Alerts />
                <Switch>
                  <PrivateRoute exact path="/" component={Home} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
         </AuthState>
  );
};
export default App;

这是我的身份验证代码，成功登录后我的状态会发生变化

import React, { useReducer } from "react";
    import axios from "axios";
    import AuthContext from "./authContext";
    import authReducer from "./authReducer";
    import {
      USER_LOADED,
      AUTH_ERROR,
      LOGIN_SUCCESS,
      LOGIN_FAIL,
      } from "../types";
    const AuthState = props => {
      const initialState = {
          isAuthenticated: null,
          user: null,
      };
      const [state, dispatch] = useReducer(authReducer, initialState);
      // Load User
      const loadUser = async () => {
        if (localStorage.token) {
          setAuthToken(localStorage.token);
        }
        try {
          const res = await axios.get("/api/auth");
          dispatch({ type: USER_LOADED, payload: res.data });
        } catch (err) {
          dispatch({ type: AUTH_ERROR });
        }
      };
      // Login User
      const login = async formData => {
        const config = {
          headers: {
            "Content-Type": "application/json"
          }
        };
        try {
          const res = await axios.post("api/auth", formData, config);
          dispatch({
            type: LOGIN_SUCCESS,
            payload: res.data
          });
          loadUser();
        } catch (err) {
          dispatch({
            type: LOGIN_FAIL,
            payload: err.response.data.msg
          });
        }
      };
      return (
        <AuthContext.Provider
          value={{
                  isAuthenticated: state.isAuthenticated,
              user: state.user,
              loadUser,
            login,
         }}
        >
          {props.children}
        </AuthContext.Provider>
      );
    };
    export default AuthState;

这是reducer代码authReducer.js

import {
  USER_LOADED,
  AUTH_ERROR,
  LOGIN_SUCCESS,
  LOGIN_FAIL,
    } from "../types";
   export default (state, action) => {
  switch (action.type) {
    case USER_LOADED:
      return {
        ...state,
        isAuthenticated: true,

        user: action.payload
      };
       case LOGIN_SUCCESS:
      localStorage.setItem("token", action.payload.token);
      return {
        ...state,
          isAuthenticated: true
         };
       case AUTH_ERROR:
    case LOGIN_FAIL:
         localStorage.removeItem("token");
      return {
        ...state,

        isAuthenticated: false,
           user: null,
         };
         default:
      return state;
  }
};

This is private route
import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import AuthContext from "../../context/auth/authContext";

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authContext = useContext(AuthContext);
  const { isAuthenticated, loading } = authContext;
  return (
    <Route
      {...rest}
      render={props =>
        !isAuthenticated && !loading ? (
          <Redirect to="/login" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

export default PrivateRoute;

Answer 1

这是意料之中的。

如果您想保留令牌，您应该将其保存在 localStorage 或 cookie 中。

然后，如果您使用的是hooks，则应检查componentDidMount 或useEffect（带有空依赖数组）中的令牌是否存在和有效性。

如果您能告诉我们您在哪里发出AJAX 请求，那就太好了，因为例如，如果您使用Axios，您可以将此逻辑封装在request 拦截器中。

Answer 2

可能是用于用户身份验证/授权的 JSON Web 令牌。你能告诉我们更多关于这方面的信息吗？