使用React构建受保护的路由

Question

我正在尝试建立一种将受保护的路由添加到我的应用程序的方法。我的Node后端具有名为/isLoggedIn的路由，该路由将响应用户是否登录。一切都在后端工作，但前端始终出现多个错误。我尝试了多种方法，但似乎都没有效果。这种方式对我来说是最有意义的，但仍然没有用。我还有其他问题。

所以我的应用程序的结构如下：>

App.js

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <Nav />
                    <Switch>
                        <Route path="/" exact component={Home} />
                        <Route path="/login" component={Login} />
                        <Route path="/register" component={Register} />
                        <Route path="/secret" component={PrivateRoute(Secret)}/>
                    </Switch>
                </div>
            </Router>
        );
    }
}
PrivateRoute.js

export default function PrivateRoute(ProtectedComponent) {
    return class extends React.Component {
        state = {
            authenticated: false
        }

        componentDidMount() {
            axios.get('http://localhost:8000/isloggedin', {withCredentials: true})
            .then(res => {
                if (res.status === 200) {
                    console.log("Status ok");
                    this.setState({authenticated: true});
                } else {
                    console.log(res.error);
                }
            })
            .catch(err => {
                console.log(err);
                this.setState({authenticated: false})
            });
        }
        render() {
            if (this.state.authenticated) {
                return <ProtectedComponent {...this.props} />
            }
            return <Redirect to="/login" />
        }
    }
}
因此，一旦我登录并尝试访问受保护的路由，我的控制台上确实会显示“ Status ok”，因此一切工作到那时，但是然后出现此错误。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

首先，我说这是一个未安装的组件，我不太明白这意味着什么。如何不安装此组件？它不是由<Route path="/secret" component={PrivateRoute(Secret)}/>调用吗？另外，每次用户尝试访问受保护的页面时，我都必须点击/isLoggedIn路由吗？在我看到的许多教程中，他们一登录就将状态设置为{loggedIn: true}，这就是他们所做的全部。因为状态只是一个javascript对象，这不是安全风险吗？不能仅从客户端将状态设置为true吗？整个客户端验证似乎非常不安全，或者我只是不知道建立受保护路由的好方法。

最后，如果有更好的方法来处理受保护的路线，请告诉我！

我正在尝试建立一种将受保护的路由添加到我的应用程序的方法。我有一个节点后端，其路由名为/ isLoggedIn，它将响应用户是否登录。一切正常...