使用 JWT 保护 React 上的路由

Question

我正在尝试为我的 React 项目创建受保护的路由，在后端我有 NodeJS。我看了很多例子，他们使用 localStorage 或“fakeAuth”，所以我没有真正获得我需要的正确信息，我遇到的主要问题是，当我登录时，我应该如何保存我登录的信息ATM，这样我的前端部分就可以看到这一点。在我的 PrivateRoute 组件中，我需要有一个布尔值来描述我的统计信息（是否登录），但我真的不明白我应该如何从我的后端我的 PrivateRoute 组件中“提取”该信息：（布尔值应该在{{??????????????}} 的地方import React from "react";import { Route, Redirect } from  "react-router-dom";import {authentication} from "./login.component"import axios from 'axios';export const PrivateRoute = ({ component: Component, ...rest}) => (    <Route         {...rest}        render={props =>             {{??????????????}} ? (                <Component {...props} />                <Redirect                    to={{                        pathname: "/login",                       state: { from: props.location }                    }}                />              )        }    />);这是我的登录组件：import React, { useState } from 'react';import axios from 'axios';const Login = () => {    const [username, setUsername] = useState('');    const [password, setPassword] = useState('');    const onChangeUsername = (e) => {    setUsername(e.target.value);    };    const onChangePassword= (e) => {     setPassword(e.target.value);    };    const onSubmit = async (e) => {        const user = {            username: username,            password: password            };        e.preventDefault();        await axios.post('http://localhost:5000/users/login', user);    };也许有人可以帮助我，任何关于如何做到这一点的建议、教程、示例都会有所帮助。

Answer 1

大多数教程使用localStorageorcookie是因为您希望即使在用户刷新页面后也保留登录状态，这样他们就不必每次都重新登录。但要回答你的问题，你可以这样做：

import React, { useState } from "react";

import { Route, Redirect, BrowserRouter } from "react-router-dom";

import "./style.css";

import axios from "axios";

function yourLoginPostApi() {

  return new Promise(r => setTimeout(() => r(true), 1000));

}

function Login({ onSuccess }) {

  const [username, setUsername] = useState("");

  const [password, setPassword] = useState("");

  let [loading, setLoading] = useState(false);

  const onChangeUsername = e => {

    setUsername(e.target.value);

  };

  const onChangePassword = e => {

    setPassword(e.target.value);

  };

  const onSubmit = async e => {

    const user = {

      username: username,

      password: password

    };

    e.preventDefault();

    setLoading(true);

    // Uncomment this line and remove the next one since it's a fake api call

    // let response = await axios.post("http://localhost:5000/users/login", user);

    let response = await yourLoginPostApi();

    setLoading(false);

    onSuccess(response);

  };

  return (

    <div className="Login">

      <h2>Traffic scan admin panel</h2>

      <div className="LoginInfo-Logins">

        <form>

          <input

            type="text"

            required

            className=""

            value={username}

            onChange={onChangeUsername}

            placeholder="Username*"

          />

          <input

            type="text"

            required

            className=""

            value={password}

            onChange={onChangePassword}

            placeholder="Password*"

          />

        </form>

      </div>

      <button onClick={onSubmit}>SIGN IN</button>

      <div>{loading && "Please wait..."}</div>

    </div>

  );

}

function PrivateRoute({ children }) {

  let [loggedIn, setLoggedIn] = useState(false);

  return loggedIn ? (

    <div>

      {children}

      <button onClick={() => setLoggedIn(false)}>log out</button>

    </div>

  ) : (

    <Login onSuccess={() => setLoggedIn(true)} />

  );

}

export default function App() {

  return (

    <BrowserRouter>

      <PrivateRoute>

        <div>Stuff only a logged in user should see</div>

      </PrivateRoute>

    </BrowserRouter>

  );

}

你可以在 stackblitz 上看到演示