Firebase 관리 화면을 React에서 가장 빠른 속도로 설치

이것은 무엇이냐

Firebase 를 배경으로 애플리케이션을 개발 중입니다.
Firebase concel에서 Firestore를 직접 터치해 데이터를 관리하지만, 관련 데이터를 동시에 편집하기 어렵고, 매번 데이터 유형 선택, 버그 등록 등의 과제를 보고 리액트를 이용한 관리 화면을 실시했다.
나는 그때 갔던 일을 총결하였다.

권한 관리

관리 화면을 보면 사용자가 사용하는 데이터보다 더 많은 변경이 필요하다.
따라서 Admin 사용자와 다른 사용자의 권한을 바꾸기 위해Firestore의 안전 규칙을 설정합니다.
다음 설정에 따라 examples의 데이터는 로그인 회원만 읽을 수 있고 Admin 사용자만 기록하고 삭제할 수 있어 권한 관리를 실현할 수 있습니다.
4

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isAdmin() {
      return exists(/databases/$(database)/documents/admins/$(request.auth.uid));
    }
    match /examples/{id} {
      allow read: if request.auth != null;
      allow create, update, delete: if isAdmin();
    }
  }
}

더 복잡한 권한을 가지려면 다른 관리자 모음집을 추가하거나 관리자 모음집에 권한 필드를 추가할 수 있습니다.

FirebaseAuthentication을 통해 로그인

먼저 라이브러리 추가
4

create-react-app examples-app
yarn add typesciprt firebase

Firebase Auth를 사용한 로그인 처리

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const firebaseApp = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
});

export const login = async (email: string, password: string, history: any) => {
  await firebaseApp.auth().signInWithEmailAndPassword(email, password);
}

Firestore 데이터 읽기 및 쓰기

Firestore CLUD 처리

export const firebaseDb = firebase.firestore();

export const fetchAll = async (): Promise<Array<any>> => {
  const colRef = firebaseDb.collection("examples");
  const snapshots = await colRef.get();
  return snapshots.docs;
};

export const save = async (data: any) => {
  return firebaseDb.collection("examples").doc(data.id).set(data);
};

export const remove = async (id: string) => {
  return firebaseDb.collection("examples").doc(id).delete();
};

Type Script에서 유형 오류 방지

Firestore의 CLUD에서 미리 유형을 정의하면 사과의 데이터 로그인을 방지할 수 있습니다.
보안 규칙에 따라 설정할 수 있지만 이번에는 Type Script를 사용해 보십시오.

export interface Example {
  title: string;
  description: string;
  order: number;
}

const toExample = (doc: firestore.DocumentSnapshot<any>): Example => {
  const data = doc.data();
  return {
    id: doc.id,
    title: data.title,
    description: data.description,
    order: data.order,
  };
};

const toFirestoreDocument = (example: Example): any => {
  return {
    title: example.title,
    description: concept.description,
    order: concept.order,
  };
};

export const fetchAll = async (): Promise<Example[]> => {
  const colRef = firebaseDb.collection("examples");
  const snapshots = await colRef.get();
  return snapshots.docs.map((doc) => toExample(doc));;
};

export const create = async (example: Example) => {
  const entity = toFirestoreDocument(example);
  return firebaseDb.collection("examples").doc().set(entity);
};

export const remove = async (id: string) => {
  return firebaseDb.collection("examples").doc(id).delete();
};

React 생성 메서드 호출

그리고 React의 구성 요소에서 만드는 방법을 호출하면 완성됩니다.
로그인 화면
4

import React, { useContext } from "react";
import { RouteComponentProps, withRouter } from "react-router";
import { AuthContext } from "../../login";

interface Props extends RouteComponentProps<{}> {}

const Login = (props: Props) => {
  const { login } = useContext(AuthContext);

  const handleSubmit = (event: any) => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    login(email.value, password.value, props.history);
  };

  return (
    <>
      <h2>ログイン</h2>
      <form onSubmit={handleSubmit}>
        <label>
          <input name="email" type="email" placeholder="メールアドレス" />
        </label>
        <label>
          <input name="password" type="password" placeholder="パスワード" />
        </label>
        <button type="submit" className={"primary"}>
          ログイン
        </button>
      </form>
    </>
  );
};

export default withRouter(Login);

Firestore에 쓰기

import React, { useContext } from "react";
import { RouteComponentProps, withRouter } from "react-router";
import { create } from "./model";

interface Props extends RouteComponentProps<{}> {}

const Example = (props: Props) => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [order, setOrder] = useState("");

  const handleSubmit = async (event: React.MouseEvent<HTMLInputElement>) => {
    event.preventDefault();
    await create({
      title,
      description,
      order: parseInt(order),
    });
  };

  return (
    <>
      <h2>説明</h2>
      <form onSubmit={handleSubmit}>
        <label>
          <input name="title" placeholder="タイトル" />
        </label>
        <label>
          <input name="description" placeholder="説明" />
        </label>
        <label>
          <input name="order" placeholder="順番" />
        </label>
        <button type="submit">
          登録
        </button>
      </form>
    </>
  );
};

export default withRouter(Login);

총결산

앱을 활용하면 Firebase concel만 있으면 데이터가 일치하지 않고 가려운 곳도 닿지 않기 때문에 필요에 따라 Admin 기능을 만들면 활용이 수월해진다.
Admin 제작에 시간이 좀 걸리겠지만 React×Type Script로 하면 안전하게 개발할 수 있으니 추천합니다