분류 Reactjs

React로 관리자 패널을 만드는 방법 (4)

컨텐츠 정보

  • 조회 375 (작성일 )

본문

//src/App.js
import React, { Component } from "react";
import { Admin, Resource } from "react-admin";
import  { UserList, UserEdit, UserCreate }  from './users';
import jsonServerProvider from "ra-data-json-server";
const dataProvider =
  jsonServerProvider("https://jsonplaceholder.typicode.com");
class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider}>
        <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} />
      </Admin>
    );
  }
}
export default App;

인터페이스에서 새로운 사용자를 만들어 봅시다 :


https://blog.logrocket.com/wp-content/uploads/2019/08/admin_edit_2.mp4?_=2 


사용자의 세부 정보를 편집하려고 할 때와 유사한 방식으로 낙관적 렌더링이 발생합니다. 이것은 FOUND NOT FOUND 메시지가 표시되기 전에 새로 작성된 사용자 위의 스니펫의 마지막 초에 잠시 동안 표시되는 이유를 설명합니다.


입증(Authentication) 


모든 관리자 페이지에는 인증 프로세스가 필요합니다. 기본이거나 조금 더 복잡할 수 있습니다 (JWT, OAuth). 기본적으로 react-admin 앱은 작동하기 위해 인증이 필요하지 않지만 인증을 관리 페이지에 통합하는 것이 가장 좋습니다.


react-admin을 사용하면 인증 구현 방법에 유연하게 대처할 수 있습니다. JSONPlaceholder에는 인증 모델이 없으므로 모든 값을 사용자 이름 및 비밀번호로 수락하고 이러한 값을 localStorage에 저장하는 더미 인증 프로세스를 작성합니다. src 폴더에서 authProvider라는 파일을 만듭니다 :


// src/authProvider.js
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';
   
   export default (type, params) => {
    // when a user tries to log in 
    if (type === AUTH_LOGIN) {
     const { username } = params;
     localStorage.setItem('username', username)
     return Promise.resolve();
    }
    // when a user tries to logout
    if (type === AUTH_LOGOUT) {
     localStorage.removeItem('username', username)
     return Promise.resolve();
    }
    // when the API throws an error
    if (type === AUTH_ERROR) {
     const { status } = params;
     if (status === 401 || status === 403) {
      localStorage.removeItem('username');
      return Promise.reject()
     }
     return Promise.resolve()
    }
    // when a user navigates to a new location
    if (type === AUTH_CHECK) {
     return localStorage.getItem('username') ?
      Promise.resolve() :
      Promise.reject();
    }
    return Promise.reject('Unknown Method');
   };

그런 다음 App.js로 이동하여 <Admin> 구성 요소의 authProvider 속성을 전달하십시오.


//src/App.js
import React, { Component } from "react";
import { Admin, Resource } from "react-admin";
import authProvider from "./authProvider";
import  { UserList, UserEdit, UserCreate }  from './users';
import jsonServerProvider from "ra-data-json-server";
const dataProvider =
  jsonServerProvider("https://jsonplaceholder.typicode.com");
class App extends Component {
  render() {
    return (
      <Admin dataProvider={dataProvider} authProvider={authProvider}>
        <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} />
      </Admin>
    );
  }
}
export default App;

이제 응용 프로그램을 다시 시작하면 먼저 로그인 페이지로 이동합니다.


https://blog.logrocket.com/wp-content/uploads/2019/08/userlogin.mp4?_=3


요약 


관리 응용 프로그램을 만드는 것이 예전처럼 복잡 할 필요는 없습니다. react-admin을 사용하면 관리 인터페이스를 매우 쉽게 스캐폴드 할 수 있습니다. 인증 프로세스도 마찬가지로 중요하며 여기서 제외되지 않습니다. 소스 코드를 살펴 보려면 CodeSandBox에서 찾을 수 있습니다.