React で認証機能を実装する

背景

個人開発＆業務での開発用にreactアプリのテンプレートになりそうなソースコードを探したのですが、自分の求めているものがなかったので作成してみました。
本記事では作成したテンプレートの説明をしていきます。

テンプレートには以下のような要素を組み込みました。

• ログイン、ログアウト機能の実装
  • 認証状況によって表示を切り替える
    • AppRoute認証状況によって表示内容が変わるページへのルーティングを行う
    • PrivateRoute認証済みのユーザーのみが見れるページを表示する
    • GuestRoute誰でも表示出来るページを表示する
  • axiosを使ったAPI通信
    • バックエンドはIdentityASP.NET Coreで作成したものを使用しています。
  • 認証情報をreduxで管理
• デザイン
  • Tailwindの導入
  • レイアウトコンポーネントの実装
  • ハンバーガーメニューの実装

ソースコードは以下で公開しています。
GitHub:redux-auth-sample

フォルダ構成

.
├── App.js
├── Layout
│   ├── LoginLayout.js
│   └── MainLayout.js
├── Pages 
│   ├── Home.js //user listを表示
│   ├── Login.js
│   └── MyPage.js //ユーザー情報を編集する　※未実装
├── api
│   └── auth.js
├── components
│   ├── HeaderMenu.js
│   ├── Router
│   │   ├── AppRoute.js
│   │   ├── GuestRoute.js
│   │   └── PrivateRoute.js
│   └── Spinner.js
├── index.css
├── index.js
└── store
    ├── auth.js
    └── index.js

Storeの永続化

画面リフレッシュをするとStoreに保存されているデータまでリセットされてしまうため、redux-persistを使用しました。
また、reduxの実装のためにはRedux tool kitを使用しました。

Router

３種類のRouterコンポーネントを使い分けることによってコンテンツごとのポリシーごとに対応できるようにしました。

使用例

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <BrowserRouter>
      <Switch>
        <AppRoute path='/' exact layout={MainLayout} component={Home} />
        <GuestRoute path='/login' layout={LoginLayout} component={Login} />
        <PrivateRoute path='/mypage' layout={MainLayout} component={MyPage} />
      </Switch>
    </BrowserRouter>
  </PersistGate>
</Provider>

AppRoute: 認証しているユーザーとしていないユーザーで表示するコンポーネントを切り替えたい
GuestRoute: 誰でも表示出来る
PrivateRoute: 認証済のユーザー飲み表示できる。そうでない場合はログイン画面に戻す