reactjs - React JS - 使用 Remember LocalStorage 登录系统

Question

我学习了一些 React。现在是用户登录的时候了。但是有一个问题。首先，代码:

App.js

import React, {useState} from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import PrivateRoute from './PrivateRoute';
import Home from './Home';
import Login from "./Login";

import { AuthContext } from "./Auth";

function App(props) {
    const [authTokens, setAuthTokens] = useState(localStorage.getItem("tokens") || "");
    const setTokens = (data) => {
        localStorage.setItem("tokens", JSON.stringify(data));
        setAuthTokens(data);
    }

    return (
        <AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }}>
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/login">Login</Link>
                        </li>
                    </ul>

                    <PrivateRoute exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                </div>
            </Router>
        </AuthContext.Provider>);
}

export default App;

登录.js

import React, { useState } from "react";
import { Link, Redirect } from 'react-router-dom';
import axios from 'axios';
import { useAuth } from "./Auth";

function Login(props) {
    const [isLoggedIn, setLoggedIn] = useState(false);
    const [isError, setIsError] = useState(false);
    const [userName, setUserName] = useState("");
    const [password, setPassword] = useState("");
    const { setAuthTokens } = useAuth();

    const referer = props.location.state ? props.location.state.referer : '/';

    function postLogin() {
        axios.post("https://myapi.com/login.php", {
            userName,
            password
        }).then(result => {
            if (result.status === 200) {
                setAuthTokens(result.data);
                setLoggedIn(true);
                console.log(result.data);
            } else {
                setIsError(true);
            }
        }).catch(e => {
            setIsError(true);
            console.log(e);
        });
    }

    if (isLoggedIn) {
        return <Redirect to={referer} />;
    }

    return (
           <input type="username" value={userName} onChange={e=>{ setUserName(e.target.value); }} placeholder="username"
                />
           <input type="password" value={password} onChange={e=>{ setPassword(e.target.value); }} placeholder="password"
                />
           <input type="submit" onClick={postLogin}>Sign In</Button>
           { isError&& <div>The username or password provider were incorrect.</div>}
    );
}

export default Login;

Auth.js

import { createContext, useContext } from 'react';

export const AuthContext = createContext();

export function useAuth() {
    return useContext(AuthContext);
}

PrivateRoute.js

import React from 'react'
import { Redirect, Route } from 'react-router-dom'

import { useAuth } from "./Auth";

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { authTokens } = useAuth();

    return (
        <Route
            {...rest}
            render={props =>
                authTokens ? (
                    <Component {...props} />
                ) : (
                    <Redirect to={{ pathname: "/login", state: { referer: props.location } }} />
                )
            }
        />
    );
}

export default PrivateRoute

1. 登录时，一切正常。但是，当我尝试再次登录 /login 时，它不会让我返回 referer 页面。虽然应该如此，否则如果用户已经登录，为什么会再次看到登录页面。

2. 是否可以将 LocalStorage(例如 Cookie)存储 30 天？

3. 如果可以的话，请解释一下登录 react 的逻辑。我是这样理解的(如有错误请指正):

   • 用户输入登录名和密码
   • 作为响应，我发送一个 token (如果服务器端的用户名和密码匹配)
   • 我加载此 token ，例如在 Mysql 中，将其存储在那里。
   • 下次登录网站时，我会检查 Mysql 数据库中是否有 token (如果有，则保持登录状态 - 如果没有，则从数据库中删除该行并将其扔到登录页面上) )。对吗？)

Answer 1

右:

当您提交登录凭据(例如用户名和密码)时，您将从服务器获取 token ，然后您必须将 token 存储在本地存储中或作为 cookie，例如 token : Your_token

然后在 App.js 的路由器中检查您是否有 token

{
   !localStorage.getItem('token') ? <Redirect from='/' to='/login' /> : ''
}        

如果您没有 token ，那么您将重定向到登录，否则将重定向到您的下一页。

您可以在 api 调用中使用您的 token 作为 header ，然后您可以从后端检查您的 token 是否有效，如果无效，则返回错误消息。

如果您的 token 已过期，那么您可以在 localstorage 中设置您的 token :“”。然后您可以从该 api 响应重定向到登录页面。

主要的事情是 token 创建 token ，它会根据您的要求自动过期，并将其与本地存储或 cookie 一起使用。