100日目（達成！）：ダッシュボードとプロフィールの管理：Protected Routeの作成（PrivateRoute)

2019年06月26日 2019年06月26日

キョウコ

今回は新しくProtectedRoute(PrivateRoute)の作成方法を学びました。actionを使って全てのデータをfetchし、そのデータをRedux stateへ持っていき、それを他のcomponents(例：education componentやexperience component)に渡す、ということだそうです。

今日はuseEffectのエラー表示対策に苦戦したため、その部分で時間を費やしました。

そして、遂に目標としていた100日を達成して、嬉しいような、まだまだスタートラインにいるだけのような両方の気持ちです。淡々と101日目もスタートして、学習し続ける予定です。

①src/components/dashboard/Dashboard.js を作成。useEffectのエラーに苦戦（とりあえず応急処置）

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getCurrentProfile } from "../../actions/profile";

const Dashboard = ({ getCurrentProfile, auth, profile }) => {
  // eslint-disable-next-line
  useEffect(() => {
    getCurrentProfile();
  }, []);

  return <div>Dashboard</div>;
};

Dashboard.propTypes = {
  getCurrentProfile: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  profile: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  profile: state.profile
});

export default connect(
  mapStateToProps,
  { getCurrentProfile }
)(Dashboard);

8行目のuseEffectがエラーとなってしまい、とりあえず //eslint-disable-next-line を前の行に書いて応急処置をしました。まだ良い解決方法が見つかっていないのですが、もしかすると後々のレクチャーで解決できるのかもしれません。

（Q&Aコーナーによると、同じエラーになった人が多かったようです。）

② App.jsにPrivaceRouteについてのコードを書き足す

App.jsは膨大なファイルになってきたので、今回書き足したコードのみまとめます。

import PrivateRoute from "./components/routing/PrivateRoute";

そして、const Appの部分のSwitch内にPrivateRouteと書き足しました。他のRouteと違うのはPrivateがついているということです。

const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <Router>
        <Fragment>
          <Navbar />
          <Route exact path='/' component={Landing} />
          <section className='container'>
            <Alert />
            <Switch>
              <Route exact path='/register' component={Register} />
              <Route exact path='/login' component={Login} />
              <PrivateRoute exact path='/dashboard' component={Dashboard} />
            </Switch>
          </section>
        </Fragment>
      </Router>
    </Provider>
  );
};

③src/componentc/routing/PrivateRoute.jsファイルを作成。

PrivateRoute.jsファイルを作成して、ユーザーがAuthenticatedであれば/loginページにリダイレクトする仕様になっています。

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

const PrivateRoute = ({
  component: Component,
  auth: { isAuthenticated, loading },
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      !isAuthenticated && !loading ? (
        <Redirect to='/login' />
      ) : (
        <Component {...props} />
      )
    }
  />
);

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

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

export default connect(mapStateToProps)(PrivateRoute);