React Router：如何在重新路由时保留已登录数据（道具）

Question

我正在创建一个React Router应用程序，并且正在学习身份验证。以下是部分内容：

登录组件（Login.jsx）

• 在后端验证用户的凭据
• 在本地存储中设置身份验证令牌
• 返回用户的数据
• 用数据设置状态
• 将状态传递给管理组件

管理组件（Admin.jsx）

• 受专用路由保护（请参阅privateroute.jsx)
• 基本上是容器组件
• 将用户的数据传递给并呈现显示/编辑数据的其他组件

导航栏上的Authentication按钮（authButton.jsx）

• 检查用户是否已登录并显示“登录”或“注销”按钮
• 如果已登录，则还会呈现“我的帖子”按钮，该按钮路由到管理员

从登录到管理都很好。我的问题是，当我单击管理员页面（如主页），然后单击“我的帖子”按钮时，它会重新路由到管理员，并知道我已登录，但用户的数据不再可用。之前，来自login组件的用户数据位于this.props.location.state.me中。

我被卡住了，因为我正试图从两个不同的组件路由到Admin，而我以前从来没有这样做过。此外，我觉得在身份验证设置中有一个解决方案是我所缺少的。

其他想法：

当传递用户的数据时，我是否应该在Admin中有条件地设置状态？

我是否应该像使用身份验证令牌一样将数据存储在浏览器的本地存储中？

我尝试获取数据，在Admin中使用ComponentDidMount设置状态，但它没有重新呈现，所以我读到使用ComponentWillReceiveProps，但这已被弃用，并被GetDerivedStateFromProps取代。我想不出来。

login.jsx

import React, { Component, Fragment } from 'react';
import * as userService from '../../services/user';
import { Redirect } from 'react-router-dom';
import IndeterminateProgress from '../utilities/indeterminateprogress';
import Nav from '../home/nav';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            redirectToReferrer: false,
            email: '',
            password: '',
            feedbackMessage: '',
            checkingLogin: true,
            me: ''
        };
    }

    componentDidMount() {
        userService.checkLogin()
            .then((loggedIn) => {
                if (loggedIn) {
                    this.setState({ redirectToReferrer: true, checkingLogin: false });
                } else {
                    this.setState({ checkingLogin: false });
                }
            });
    }

    login(e) {
        e.preventDefault();
        userService.login(this.state.email, this.state.password)
            .then((meData) => {
                this.setState({ redirectToReferrer: true, me: meData })
            })  
            .catch((err) => {
                if (err.message) {
                    this.setState({ feedbackMessage: err.message });
                }
            });
    }

    handleEmailChange(value) {
        this.setState({ email: value });
    }

    handlePasswordChange(value) {
        this.setState({ password: value });
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/admin', state: { ...this.state } } };
        const { redirectToReferrer, checkingLogin } = this.state;

        if (checkingLogin) {
            return <IndeterminateProgress message="Checking Login Status..." />;
        }
        if (redirectToReferrer) {
            return (
                <Redirect to={from} />
            );
        }

        return (
            <Fragment>
                <Nav />
                <h2 className="heading center">Login to continue</h2>
                <form className="center" onSubmit={(e) => this.login(e)}>
                    <div className="form-group">
                        <input
                            placeholder="Email"
                            id="email"
                            className="col-3"
                            type="email"
                            onChange={(e) => this.handleEmailChange(e.target.value)}
                            required
                        />
                    </div>
                    <div className="form-group">
                        <input
                            placeholder="Password"
                            id="password"
                            className="col-3"
                            type="password"
                            onChange={(e) => this.handlePasswordChange(e.target.value)}
                            required
                        />
                    </div>
                    {this.state.feedbackMessage ? (
                        <p>{this.state.feedbackMessage}</p>
                    ) : null}
                    <input type="submit" value="Login" className="btn btn-info btn-sm" />
                </form>
            </Fragment>
        );
    }
}

export { Login };

Admin.jsx

import React, { Component } from 'react';
import Nav from '../home/nav';
import AdminBlogContainer from './adminblogcontainer'
import { BrowserRouter as Router, Link } from 'react-router-dom';

const Admin = (props) => {
    return (
        <div className="flexcol center">
            <Nav />
            <h1 className="heading">Your Blog Posts</h1>
            <AdminBlogContainer {...props.location.state.me} />
            <Link to={{
                pathname: '/write',
                state: { ...props.location.state.me }
            }}
                className="btn btn-outline-secondary mt-4"
            >Create a New Blog Post</Link>
        </div>
    )
}

export { Admin };

privateroute.jsx

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';

const PrivateRoute = (props) => {
    const Component = props.component;
    const propsToPass = Object.assign({}, props);
    delete propsToPass.component;

    return (
        <Route {...propsToPass} render={props => (
            isLoggedIn() ? (
                <Component {...props} />
            ) : (
                <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }} />
            )
        )} />
    );
};

export { PrivateRoute }

authButton.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';

const AuthButton = (props) => {
    if (isLoggedIn()) {
        return (
            <div>
                <Link className="btn btn-info m-1" to="/logout">Logout</Link>
                <Link className='btn btn-info m-1' to={{
                    pathname: '/admin',
                    // state: { ...this.state }
                }}
                    >My Posts</Link>
            </div>
        );
    } else {
        return (
            <div>
                <Link className="btn btn-info m-1" to="/login">Login</Link>
                <Link className="btn btn-info m-1" to="/register">Register</Link>
            </div>
        )
    }
};

export { AuthButton };

Answer 1

我的问题似乎有两个主要的解决办法。%1是按此页上的答案使用存储。另一种是将数据存储在本地存储中，看起来是：

在login.jsx中设置本地存储而不是设置状态

login(e) {
        e.preventDefault();
        userService.login(this.state.email, this.state.password)
            .then((meData) => {
                localStorage.setItem("me", JSON.stringify(meData))
                this.setState({ redirectToReferrer: true})
            })  
            .catch((err) => {
                if (err.message) {
                    this.setState({ feedbackMessage: err.message });
                }
            });
    }

检索AdminBlogContainer.jsx中的数据

componentDidMount() {
    let meData = JSON.parse((localStorage.getItem("me")))
    authorsService.one(meData.id) ...

Answer 2

这是创建商店的原因之一。将其视为一个全局对象，可以在应用程序中的任何地方访问。

我个人用过mobx/mobx-react（很容易，做事情很神奇），还有redux

使用mobx可以执行如下操作：

全局存储

// /stores/authentication.js
class AuthenticationStore {
   user = {};
   //authentication logic here
}
const authenticationStore = new AuthenticationStore();
export default authenticationStore;

根应用程序组件

// /app.js
import authenticationStore from './stores/authentication';
import { Provider } from 'mobx-react';

export default class App extends Component {

  render(){
   return (
   <Provider authenticationStore={authenticationStore}>
      <BrowserRouter>
         <SomeComponent/>
      </BrowserRouter>
   <Provider>);
   }

}

某些成分；

// /components/some.component.js
@inject('authenticationStore')
class SomeComponent extends Component {
    render(){
       const {authenticationStore} = this.props;
       const {user} = authenticationStore;
       render(
          <div>${user.name}</div>
       )
    }
}