为什么我在 React 应用程序中丢失了登录信息？

Question

I have an reactjs app that uses a django backend to deal with authentication.

Here are the pertinent parts of my App.tsx Typescript code for my react app.

import React, {useState, useEffect} from 'react';
import { BrowserRouter as Router, Route, Link, RouteComponentProps, Redirect } from 'react-router-dom';
import {AuthContext, useAuth} from "./context/auth";
import './App.css';
import PrivateRoute from "./PrivateRoute";
import logoImg from "./img/logo.svg";
import { Card, Logo, Form, Input, Button } from "./components/AuthForm";
import axios from 'axios';
import Cookies from 'js-cookie';


// The "Home" Page.
function Index() {
    const [appUser, setAppUser] = useState({pk:-1, username: '', email: '', first_name: '', last_name:''});
    const {authTokens} = useAuth();
    useEffect(()=> {
        if (authTokens) {
            const url = 'http://localhost:8000/rest-auth/user/';
            const withCredentials = true;
            const method = 'get';

            // the token is what we got from the backend when we logged in.
            const headers = {
                "Authorization": "Token " + authTokens['key'] + " "
            };
            axios.request({method, url, withCredentials, headers}).then(response => {
                console.log('Login() response is ', response);
                setAppUser((appUser) => ({...appUser, ...response.data}));
            })
            //    .catch(error => { setAppUser(null); setLoggedIn(false); })
        }
    }, [authTokens]);
    return authTokens ? (
        <h2>Home you are logged in. {appUser.first_name || 'No first name'} email is {appUser.email}</h2>
    ) : (
        <Router>
            <div>
                <h2>Home you not logged in.</h2>
                <nav>
                    <ul>
                        <li> <Link to="/login">Login</Link> </li>
                        <li> <Link to="/signup">Sign Up</Link> </li>
                    </ul>
                </nav>

                <Route path="/login" component={Login} />
                <Route path="/signup" component={Signup} />
            </div>
        </Router>
    );
}

function Login (props: RouteComponentProps<TParams>) {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const {authTokens, setAuthTokens} = useAuth();
  const [isError, setIsError] = useState(false);
  const referer = props.location.state ? props.location.state.referer : '/';
  const [appUser, setAppUser] = useState({pk:-1, username: '', email: '', first_name: '', last_name:''});
  const [isLoggedIn, setLoggedIn] = useState(false);

  useEffect(()=> {
      // axios.get('http://localhost:8000/api/v1/rest-auth/user/', {headers: { 'Authorization': `Token ${token}`}})
        if (!!authTokens) {
            const url = 'http://localhost:8000/rest-auth/user/';
            const withCredentials = true;
            const method = 'get';
            const headers = {
                "Authorization": "Token " + authTokens['key'] + " "
            };
            axios.request({method, url, withCredentials, headers}).then(response => {
                console.log('Login() /rest-auth/user response is ', response);
                // setAppUser({...appUser, ...response.data});
                setAppUser((appUser) => ({...appUser, ...response.data}));
                setLoggedIn(true);
            })
            //    .catch(error => { setAppUser(null); setLoggedIn(false); })
        }
  }, [authTokens]);

  function postLogin() {
        const url = 'http://localhost:8000/rest-auth/login/';
        const withCredentials = true;
        const method = 'post';
        const data = {"username": userName, "password": password};
        // BIG WARNING!!!
        // password is being passed unencrypted and in the clear.
        axios.request({url, withCredentials, data, method}).then(
            result => {
                // console.log('Login.postLogin.else result is :', result);
                if (result.status === 200) {
                    setAuthTokens(result.data);
                } else {
                    setIsError(true);
                }
            });// .catch(e => { console.log('Login.postLogin.catch e is :', e); setIsError(true); });
  } // end postLogin

  if (authTokens) {
    console.log('Login page authTokens is ', authTokens);
    console.log('Login page appUser is ', appUser);

    // UPDATE
    // SET sessionStorage cookie
    window.sessionStorage.setItem('key', authTokens['key']);

    return <Redirect to={referer}/>;
  } else {
    console.log('Login page authTokens is ', authTokens);
    console.log('Login page appUser is ', appUser);
  }

  return (
      <Card>
        <Logo src={logoImg} />
        <Form>
          <Input
              type="username"
              placeholder="username"
              value={userName}
              onChange={(e: { target: { value: React.SetStateAction<string>; }; }) => { setUserName(e.target.value); }}
          />
          <Input
              type="password"
              value={password}
              onChange={(e: { target: { value: React.SetStateAction<string>; }; }) => { setPassword(e.target.value); }}
              placeholder="password" />
          <Button onClick={postLogin}>Sign In</Button>
        </Form>
        <Link to="/signup">Don't have an account?</Link>
      </Card>
  );
}

const App: React.FunctionComponent = () => {
    const [authTokens, setAuthTokens] = useState(undefined);  //type: AuthTokens | undefined (see auth.js)
    // <AuthContext.Provider value={false}>
    return (
      <AuthContext.Provider value={{ authTokens, setAuthTokens }}>
        <Router>
          <div>
            <nav>
              <ul>
                <li> <Link to="/">Home</Link> </li>
                <li> <Link to="/products/1">First Product</Link> </li>
                <li> <Link to="/products/2">Second Product</Link> </li>
                <li> <Link to="/admin">Admin Page</Link> </li>
              </ul>
            </nav>

            <Route path="/" exact component={Index} />
            <Route path="/products/:id" component={Product} />
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
            <PrivateRoute path="/admin" component={Admin} />
            <Route path="/confirm-email/:id" component={ConfirmEmail} />
          </div>
        </Router>
      </AuthContext.Provider>
  );
};

export default App;

Now if I start my backend server and start my app with np start I can navigate in a browser to http://localhost:3000 and I see:

and I can login if I click the "Login" link. Here is a screen shot of me logged in:

I do notice that the browser location still reports http://localhost:3000/login while the "Home Page" is being displayed. But we can see that a Sheldon Plankton has logged in. Now if I click on the links I have: Home, Product 1, Product 2 and Admin everything is fine. But if I type in a URL into the browser like http://localhost:3000/ I lose my login and I see:

Which shows that Sheldon Plankton is no longer logged in.

What I am doing wrong?

Answer 1

That's because you are storing login credentials in session's memory. When you change the URL on your own or refresh the page, the application's router (eg React Router) is not the routing the website. It is the browser's native navigation system that loads it. As a result, all the memory that existed previously in the session is reset. It is loading a new page instead of navigating within the same page (do not let the URL change to fool you that it is actually a new page -- that's how HTML5 browser history works).

You need to persist the state between sessions. You can do it using cookies, sessionStorage , or localStorage . Do not forget that if you use session storage, your user's information will be deleted if you close the browser.

• Session Storage (MDN): https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
• Local Storage (MDN): https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage