Reactで認証済みか否かでアクセスを制御するやり方

スポンサーリンク

認証済みか否かでアクセスを制御したい時があるかと思います。

本記事では、Reactで上記を実現するやり方を紹介します。

認証済ユーザ用のルート

まずはじめに認証済みユーザ用のルートを作成していきます。

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from 'react-redux';

function PrivateRoute(props) {
  const { auth } = props;
  return auth ?  <Route path={props.path} component={props.component} /> : <Redirect to="/login" />;
}

const mapStateToProps = (state) => {
  return {
    auth: state.auth.loginState
  };
};

export default connect(mapStateToProps)(PrivateRoute);

7行目:認証の有無で分岐しています。認証有りの場合は呼び出し元から引き継がれた情報をRouteに設定しています。逆に認証情報が無かった場合はLoginページに遷移させるようにしています。

12行目:認証情報はReduxを利用して管理しています。

未認証ユーザ用ルート

続いて未認証ユーザ用のルートです。

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from 'react-redux';

function GuestRoute(props) {
  const { auth } = props;
  return auth ? <Redirect to="/" /> : <Route path={props.path} component={props.component} />;
}

const mapStateToProps = (state) => {
  return {
    auth: state.auth.loginState
  };
};

export default connect(mapStateToProps)(GuestRoute);

基本的な作りは先ほどと同じになります。

異なる点は7行目になりまして、

認証有りの場合はTOPに遷移させるようにしています。

それぞれのルートを呼び出す

最後に上2つのルートを呼び出します。

〜省略〜

import PrivateRoute from "./route/PrivateRoute";
import GuestRoute from "./route/GuestRoute";

〜省略〜

function App() {
    return (
        <Provider store={store}>
            <Router>
                <PrivateRoute path="/private" exact component={Private} />
                <GuestRoute path="/guest" component={Guest} />
            </Router>
        </Provider>
    );
}

〜省略〜

以上です。

JavaScript React
スポンサーリンク
エンジニアの日記

コメント