認証情報をreduxで管理してreact-routerのRedirectを学ぶ

目標

題名の通り、reduxで管理した情報に基づきRedirectを行います。
具体的に実装するのは、ログインした人じゃないと見れないページを作るというものです。

実装していく

まずはトップのルーティングの部分

App.js

import PrivateRoute from './PrivateRoute';

const App = () => {
  return (
    <Switch>
      <PrivateRoute path="/" exact component={TopPage} />
      <Route path="/login" component={Login} />
      <Route component={NotFoundPage} />
    </Switch>
  );
};

ここでPrivateRouteというものを自分で作っています。
PrivateRouteをみていきましょう。

PrivateRoute.js

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

const PrivateRoute = ({user, component: Component, ...rest}) => {
  return (
    <Route
      {...rest}
      render={props => 
        user ? (
          <Component {...props} />
        ) : (
          <Redirect to='/login' />
        )
      }
    />
  );
}

const mapStateToProps = state => {
  return {
    user: state.auth.user
  }
}

export default connect(mapStateToProps)(PrivateRoute);

ここでreduxで管理しているuserの真偽により、偽であれば/loginにRedirectします。

reducers/authReducer.js

const initialState = {
  user: false
}

export default (state = initialState, action) => {
  switch(action.type) {
    case 'LOG_IN':
      return { ...state, user: true };
    case 'LOG_OUT':
      return { ...state, user: false };
    default:
      return state;
  }
}

お試しに実装したのでreducerでは大したことはしていません。
あとでfirebaseでのGoogleログインにしようと思っているのでその時は少し考えなければいけないかも。

最後にログインのコンポーネント

components/Login/index.js

import React from 'react';

import { connect } from 'react-redux';
import { login } from '../../actions';

class Login extends React.Component {

  reduxLogin = () => {
    const { login, history } = this.props;

    login();
    history.push('/');
  }

  render() {
    return (
        <div>
          <button onClick={this.reduxLogin}>login redux</button>
        </div>
    );
  }
}

export default connect(null, { login })(Login);

ログインのボタンを用意してログインするとトップページに飛ぶようにしています。
ログインしないでトップページに飛ぼうとしても/loginにRedirectされます。

まとめ

今回はreact-routerのRedirectについてみました。
参考になれば幸いです。