Question

在使用password.js登录后如何在反应中使用受保护的路由

所以，我发现的是通过password.js成功登录后，当我从前端向服务器发送请求时，请求中有用户属性（即req.user）。

我尝试将axios.get放入应用程序组件的componentDidMount方法中的“ / authenticate” URL中，以检查用户是否登录，并且我意识到在用户执行任何登录操作之前，componentDidMount仅被调用一次。我还尝试将axios放入componentDidUpdate中，它也无法正常工作。

在使用密码之前，我在客户端拥有auth.js并只是简单地检查了ID和密码，如果它是正确的ID和密码，则auth.isAuthenticated变为true并且可以访问受保护的路由的组件。它的工作原理是，当我刷新页面时，它以某种方式不记得以前的auth.isAuthenticated，并且它的初始值始终为false并转到“ /”。所以我搬到护照上遇到了这个问题...

有人可以告诉我该怎么做吗？

'''javascript //在server.js中

app.get('/authenticate', function(req, res)  {
        if (req.user)
            res.send(true);
        else
            return null;
    });

''' '''javascript //在app.jsx中

     constructor(props) {
            super(props);
            this.state = { isAuthenticated: false };
        }


    componentDidMount() {
            axios.get('/authenticate').then((res) => {
                if (res)
                    this.setState({ isAuthenticated: true });
            })
            console.log("componentDidMount in errand-app")
            console.log(this.state.isAuthenticated);
        }

    render() {
            let { isAuthenticated } = this.state;
            return <div>
                <Switch>
                    <Route exact path="/" component={LoginPage} />
                    <ProtectedRoute isAuthenticated= 
   {this.state.isAuthenticated} exact path="/main" component={Main} />

'''

'''javascript //在protectedRoute中

const ProtectedRoute = ({ component: Component, isAuthenticated, ...rest 
}) => {
    return (
        <Route
            {...rest}
            render={props => {
                if (isAuthenticated) {
                    return <Component {...props} />;
                }
                else {
                    return (
                        <Redirect
                            to={{pathname: "/",
                                state: { from: props.location
                                 }
                            }}
                        />
                    );
                }
            }
            }
        />
    )
}

'''

我希望我的protectedRoute具有像isAuthenticated之类的道具，并且只有在它为true时，才显示该组件，否则将重定向到登录页面的“ /”。

如何使用受保护的路由与passport.js反应

0 个答案: