javascript - 为什么用户登录后导航栏组件不更新？ (无 Redux)

Question

我希望导航栏更改状态，但我不知道如何在不使用 Redux 的情况下将状态从登录传递到导航栏。它仅在我手动刷新页面后更新导航栏的状态。不是很好。如果一旦我单击“登录”按钮，导航栏也会更新其状态，那就太好了。我怎样才能传递状态？

应用程序组件:

const App = () => {
    return (
        <BrowserRouter>
            <div className="App">
                <Navbar />
                <Switch>
                    <Login exact path="/login" component={Login} />
                    <Signup exact path="/signup" component={Signup} />
                </Switch>
            </div>
        </BrowserRouter>
    );
};

导航栏组件:

class Navbar extends React.Component {
    constructor() {
        super();
        this.state = {
            modalOpen: false,
            isAuthenticated: false,
            name: '',
        };
}

componentDidMount() {
        if (localStorage.getItem('token')) {
            this.setState({ isAuthenticated: true });
        }
    }

render() {
        return (
            <div className="navbar">
                <div className="navbar-flex">
                    {this.state.isAuthenticated && <p>Hello {this.state.name}</p>}
                    <Button onClick={this.toggleModal}>Menu</Button>
                </div>
                {this.state.modalOpen && (
                    <div className="modal" ref={this.setWrapperRef}>
                        {!this.state.isAuthenticated ? (
                            <div>
                                <Link to="/">
                                    <Button onClick={() => this.setState({ modalOpen: false })}>Home</Button>
                                </Link>
                                <Link to="/login">
                                    <Button onClick={() => this.setState({ modalOpen: false })}>Login</Button>
                                </Link>
                                <Link to="/signup">
                                    <Button onClick={() => this.setState({ modalOpen: false })}>Signup</Button>
                                </Link>
                            </div>
                        ) : (
                            <div>
                                <Link to="/">
                                    <Button onClick={() => this.setState({ modalOpen: false })}>Home</Button>
                                </Link>
                                <Link to="/">
                                    <Button onClick={this.logout}>Logout</Button>
                                </Link>
                            </div>
                        )}
                    </div>
                )}
            </div>
        );
    }

登录组件提交方法:

onSubmit = (e) => {
        e.preventDefault();

        this.setState({ loading: true });

        axios
            .post('/api/login', {
                email: this.state.email,
                password: this.state.password,
            })
            .then((res) => {
                if (res.data.token) {
                    localStorage.setItem('token', res.data.token);
                    this.setState({ loading: false });
                    this.props.history.push('/');
                } else if (res.data.status === 'fail') {
                    this.setState({ loading: false });
                }
            });
    };

Answer 1

以下是我如何控制导航栏以反射(reflect)当前状态(已验证或未验证)。

您可以创建一个方法来检查 token 的本地存储并返回 false 或 true 结果，或者您可以执行任何您想要执行的操作以确保身份验证并根据该结果返回值。

const isAuthenticated = (token) => {
     localStorage.getItem(token) ? true:false;
}

然后您可以导入它，并在 componentDidMount() 上调用该方法并存储结果，并用它做任何您想做的事情。