Question

我想保护路由并使它们仅对经过身份验证的用户可用。问题是在执行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（但这是默认值！）之后，我才会重定向到/ login

为了简洁起见，我删除了一些代码，因此我们可以专注于此问题。希望你能理解谢谢！

Answer 1

仅当用户通过身份验证后，您才能呈现受保护的路由

{context.isAuthenticated ? 
   <Route path="/this-is-a-protected-route" exact strict component={Admin}/> :
   <Redirect to='/login' />
}

私人路线可以移至单独的部分。

更多详细信息和示例here。

反应16.7受保护的路线

1 个答案: