反应16.7受保护路线

我想保护路由,并使它们只对经过身份验证的用户可用。 问题是,在执行fetch()并更新 上下文 (这需要一些时间)

当获取完成且上下文状态为authenticated=false时,我想将用户重定向到/login

import { Route, Switch } from 'react-router-dom'
import { MyContext } from './Context'

...

<MyContext.Consumer>
    {(context) => (

        <Switch>
            <Route path="/" exact strict component={Homepage}/>
            <Route path="/this-is-a-protected-route" exact strict component={Admin}/>
            <Route path="/login" exact strict component={Login}/>
        </Switch>

    )}
</MyContext.Consumer>

这是上下文

export const MyContext = React.createContext()

export class MyProvider extends Component {

    state = {
        'isAuthenticated': false,
    }

    componentDidMount() {

        fetch('/authenticated')
            .then(
                function(response) {
                    response.json().then(function(data) {
                        this.setState({'isAuthenticated': true})
                    });
                }
            )
            .catch(function(error) {
                console.log('fetch error', error);
            });
    }

    render() {
        return (
            <MyContext.Provider value={{
                isAuthenticated: this.state.isAuthenticated
            }}>
                {this.props.children}
            </MyContext.Provider>
        )
    }
}

理想情况下,只有在点击/this-is-a-protected-route和state.isAuthenticated=false(但这是默认值!)

为了简洁起见,我删除了一些代码,以便我们可以集中精力解决这个问题。希望你能理解谢谢!