React Router 4 での認証の管理
React Router バージョン 4 では、認証済みルートの実装には、以前のバージョンとは異なるアプローチが必要です。
独自のアプローチ
以前は、子を持つ複数の Route コンポーネントを使用できましたが、現在は推奨されていません。
<Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route>
正解実装
認証されたルートを実装するには、Route を拡張し、コンポーネントをレンダリングする前に認証をチェックするカスタム コンポーネントを使用することが 1 つのオプションです。
import React, {PropTypes} from "react"; import {Route} from "react-router-dom"; export default class AuthenticatedRoute extends React.Component { render() { if (!this.props.isLoggedIn) { this.props.redirectToLogin() return null } return <Route {...this.props} /> } } AuthenticatedRoute.propTypes = { isLoggedIn: PropTypes.bool.isRequired, component: PropTypes.element, redirectToLogin: PropTypes.func.isRequired }
代替アプローチ
もう 1 つの方法は、Redirect コンポーネントを使用することです。これにより、認証されたプロパティに基づいてユーザーをリダイレクトできます。
function PrivateRoute ({component: Component, authed, ...rest}) { return ( <Route {...rest} render={(props) => authed === true ? <Component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} /> ) }
その後、ルートで PrivateRoute コンポーネントを使用できます。
<Route path='/' exact component={Home} /> <Route path='/login' component={Login} /> <Route path='/register' component={Register} /> <PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
以上がReact Router 4 で認証を管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。