Tìm hiểu về Refine – React meta-framework (Phần 2)

Ở phần trước, chúng ta đã tìm hiểu về Refine, cách thiết lập dự án và xây dựng một ứng dụng CRUD đơn giản. Trong phần này, chúng ta sẽ đi sâu vào các tính năng nâng cao của Refine, giúp bạn tận dụng tối đa framework này để phát triển ứng dụng bảng điều khiển hoặc quản trị mạnh mẽ.

1. Xác thực và Phân quyền

Refine hỗ trợ nhiều phương thức xác thực như Firebase, Auth0, Keycloak hoặc bạn có thể tự xây dựng hệ thống xác thực tùy chỉnh.

Thiết lập xác thực với AuthProvider

Bạn có thể triển khai xác thực bằng cách sử dụng AuthProvider. Ví dụ với xác thực đơn giản bằng token:

import { Refine } from "@refinedev/core";
import { authProvider } from "./authProvider";

const App = () => {
  return <Refine authProvider={authProvider} />;
};

Cấu hình authProvider.js:

export const authProvider = {
  login: async ({ username, password }) => {
    localStorage.setItem("token", "dummy_token");
    return Promise.resolve();
  },
  logout: () => {
    localStorage.removeItem("token");
    return Promise.resolve();
  },
  checkAuth: () => {
    return localStorage.getItem("token") ? Promise.resolve() : Promise.reject();
  },
  getUserIdentity: () => {
    return Promise.resolve({ id: 1, name: "Admin" });
  },
};

Sau khi thiết lập, Refine sẽ tự động điều hướng người dùng chưa đăng nhập đến trang đăng nhập.

2. Tích hợp API với Data Provider

Refine hỗ trợ nhiều kiểu dữ liệu như REST API, GraphQL, Supabase, Firebase, Strapi,…

Ví dụ, tích hợp với JSON Server:

npm install @refinedev/simple-rest

Cấu hình trong App.tsx:

import { Refine } from "@refinedev/core";
import { dataProvider } from "@refinedev/simple-rest";

const App = () => {
  return (
    <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")} />
  );
};

3. Tùy chỉnh giao diện với UI Components

Refine hỗ trợ nhiều thư viện UI như Ant Design, Material UI, Chakra UI.

Ví dụ tạo trang danh sách với Ant Design:

import { List, Table, useTable } from "@refinedev/antd";

const PostList = () => {
  const { tableProps } = useTable();
  return (
    <List>
      <Table {...tableProps} rowKey="id" />
    </List>
  );
};

4. Quản lý trạng thái với Hooks mạnh mẽ

Refine cung cấp nhiều hooks hỗ trợ như:

• useList – lấy danh sách dữ liệu.
• useShow – hiển thị chi tiết một bản ghi.
• useCreate – tạo dữ liệu mới.
• useUpdate – cập nhật dữ liệu.
• useDelete – xóa dữ liệu.

Ví dụ tạo bài viết mới với useCreate:

import { useCreate } from "@refinedev/core";

const CreatePost = () => {
  const { mutate } = useCreate();
  
  const handleCreate = () => {
    mutate({ resource: "posts", values: { title: "Bài viết mới" } });
  };

  return <button onClick={handleCreate}>Tạo bài viết</button>;
};

5. Tích hợp bộ lọc và phân trang

Refine giúp lọc và phân trang dữ liệu dễ dàng:

const { tableProps, searchFormProps } = useTable({
  resource: "posts",
  initialSorter: [{ field: "title", order: "asc" }],
  initialFilter: [{ field: "category", operator: "eq", value: "tech" }],
});

Kết luận

Refine là một framework mạnh mẽ giúp phát triển nhanh các ứng dụng quản trị. Với xác thực, tích hợp API, quản lý trạng thái và UI linh hoạt, Refine giúp bạn tiết kiệm thời gian mà vẫn đảm bảo tính linh hoạt.

Hy vọng qua hai bài viết này, bạn đã có cái nhìn tổng quan về Refine và có thể bắt đầu áp dụng vào dự án của mình!