2021/03/13

Reactを使ったログインとルーティング

未分類

Reactのルーティングにはreact-router-を使用。
ログインにはFirebase Authenticationを使用

Firebase atuthenticationを採用の理由としては電話番号認証ができる事

Firebase Athenticationでのログイン

参考下記

https://qiita.com/zaburo/items/801bd288cec47bd28764

ここでさらにrole_idを使用して、role_idの番号によって遷移先の制御を行います。

react-router-domでの遷移制御

上記の記事の応用でhooksに変更してルーティング方法の条件も加えたパターンは下記になります。

下記のコードを作成して、ルーティングに組み込めば、挟んだ所はチェック済みの人だけルーティング可能になる。

import React, { useState, useEffect } from 'react'
import firebase from './firebase';

    
export const AuthAdmin = (props) => {
    
    const [user, setUser] = useState({ id: null, last_name: "", first_name: "" });


    useEffect(() => {
        console.log("管理者チェック")
        ここで、管理者権限のidのrole_id等を取得する。

        }, []);


    return (
        <>
          {/*下記で遷移可能な時の条件を書く*/}
          <div>{user.role_id < x && props.children}</div>
        </>
      );
}

export default AuthAdmin;