[react]HOC高次素子(ログインパス別)

導入背景
ログインの有無により,ルーティング権限を与えるために開発されたサービスはログインユーザのみが利用できるようになった.

HOC(Higher-Order-Component)?

要素をパラメータとして、他の要素の高次関数

を返す.

HCの原理は、パラメータ受信要素であり、関数内部に新しい要素を作成し、パラメータ形式で受信した要素をその要素内でレンダリングすることである(この説明はコードで容易に理解できる).

HOCの利点:コードの再利用性

導入されたプロジェクトでは,HOCはauthを区別する部分に適用される.

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

export default function (SpecificComponent, option) {
  function AuthenticationCheck(props) {
    let user = useSelector(state => state.user);
    let isAuth = localStorage.getItem('token');
    console.log(isAuth === null);

    //Not Loggined in Status
    if (isAuth === null) {
      if (option) {
        props.history.push('/login');
      }
      //Loggined in Status
    } else {
      if (option === false) {
        props.history.push('/main');
      }
    }

    return <SpecificComponent {...props} user={user} />;
  }
  return AuthenticationCheck;
}

localstorageの値がnullの場合、ログインしていないと判断し、/loginルーティングに移動します.

...
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <div style={{ paddingTop: '0', minHeight: 'calc(98vh - 45px)' }}>
        <NavBarPage />
        <Switch>
          <Route exact path="/" component={Auth(MainPage, true)} />
          <Route exact path="/login" component={Auth(LoginPage, false)} />
          <Route exact path="/register" component={Auth(RegisterPage, false)} />
          <Route
            exact
            path="/register/taste"
            component={Auth(RegisterTastePage, false)}
          />
...

App.jsに属するコードの一部.

2Auth()ご希望のページをインポートします.

null->誰でもアクセスできるページ
true->ログインユーザーのみがアクセスできるページ
false->ログインしたプレイヤーがアカウントページに行くとブロックされます

ex)ホームページにアクセスしたい場合は、Auth(MainPage,null)に記入してください.