Menggunakan pangkalan data untuk kawalan kebenaran data dalam React Query

Menggunakan pangkalan data untuk kawalan kebenaran data dalam React Query

Sebagai perpustakaan pengurusan keadaan React yang berkuasa, React Query menyediakan banyak ciri kemudahan untuk mengurus data aplikasi. Salah satu ciri penting ialah menyokong interaksi dengan pangkalan data untuk mencapai kawalan kebenaran data. Artikel ini akan memperkenalkan cara menggunakan pangkalan data untuk kawalan kebenaran data dalam React Query dan menyediakan beberapa contoh kod khusus.

1. Reka bentuk pangkalan data

Sebelum kita mula, kita perlu mereka bentuk model pangkalan data kita terlebih dahulu. Katakan kita mempunyai sistem blog ringkas dengan dua jadual data utama: jadual pengguna dan jadual artikel. Jadual pengguna menyimpan maklumat asas tentang pengguna, dan jadual artikel menyimpan artikel yang diterbitkan oleh pengguna. Kami berharap dapat melaksanakan dua kawalan kebenaran berikut:

1. Pengguna hanya boleh melihat artikel yang diterbitkan oleh mereka sendiri.
2. Admin boleh lihat semua artikel.

Dalam reka bentuk pangkalan data, kita boleh menambah medan tambahan pada jadual artikel untuk mewakili pemilik artikel. Medan ini boleh menjadi pengecam unik untuk pengguna, seperti ID pengguna. Pada masa yang sama, kami juga boleh menambah medan pada jadual pengguna untuk mewakili peranan pengguna. Peranan pentadbir boleh ditetapkan kepada nilai khas, seperti "admin". Dengan cara ini, kami boleh mengawal kebenaran berdasarkan peranan pengguna dan pemilik artikel.

2. Konfigurasi React Query

Sebelum menggunakan React Query, kita perlu mengkonfigurasi cara ia berkomunikasi dengan bahagian belakang. React Query menyokong pelbagai kaedah komunikasi, seperti REST, GraphQL, dsb. Dalam contoh ini, kami akan menggunakan API RESTful untuk berkomunikasi dengan bahagian belakang. Kita boleh menggunakan axios untuk membuat permintaan rangkaian. Berikut ialah contoh konfigurasi mudah:

import { QueryClient, QueryClientProvider } from 'react-query';
import axios from 'axios';

const queryClient = new QueryClient();

const API_BASE_URL = 'http://localhost:3000/api'; // 后端 API 地址

// 创建一个 axios 实例
const api = axios.create({
  baseURL: API_BASE_URL,
});

// 设置请求拦截器，在每个请求中添加身份验证信息
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken'); // 从本地存储中获取访问令牌
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 使用 QueryClientProvider 包裹应用程序的根组件
ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

Dalam kod di atas, kami mula-mula mencipta contoh queryClient dan mengkonfigurasi URL asas API bahagian belakang. Kami kemudian mencipta contoh axios dan menyediakan pemintas permintaan untuk menambah maklumat pengesahan pada setiap permintaan. Akhir sekali, kami membalut komponen akar aplikasi dengan QueryClientProvider untuk menggunakan React Query sepanjang aplikasi. queryClient 实例，并配置了后端 API 的基本 URL。然后，我们创建了一个 axios 实例，并设置了请求拦截器，在每个请求中添加身份验证信息。最后，我们使用 QueryClientProvider 包裹应用程序的根组件，以便在整个应用程序中使用 React Query。

三、实现数据权限控制

接下来，我们将展示如何在 React Query 中实现数据权限控制。首先，我们需要定义一个用于获取文章列表的查询函数。这个查询函数将根据用户的角色和文章的拥有者来返回不同的数据。

import { useQuery } from 'react-query';

// 获取文章列表的查询函数
const fetchPosts = async () => {
  const currentUser = localStorage.getItem('currentUser'); // 获取当前用户
  const role = currentUser.role; // 获取当前用户的角色

  let url = '/posts';
  if (role === 'admin') { 
    // 管理员可以查看所有文章
    url = '/posts?all=true';
  } else { 
    // 用户只能查看自己的文章
    const userId = currentUser.id; // 获取当前用户的 ID
    url = `/posts?userId=${userId}`;
  }

  const response = await api.get(url); // 发送 GET 请求获取文章列表
  return response.data;
};

// 在组件中使用 useQuery 获取文章列表数据
const PostsList = () => {
  const { data: posts, isLoading, isError } = useQuery('posts', fetchPosts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error loading posts</div>;
  }

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

在上述代码中，我们首先通过 localStorage 获取当前用户的信息和角色。然后，根据用户的角色和文章的拥有者来构建不同的请求 URL。最后，我们使用 api.get(url) 发送 GET 请求，获取文章列表数据。在组件中使用 useQuery

3. Laksanakan kawalan kebenaran data

Seterusnya, kami akan menunjukkan cara melaksanakan kawalan kebenaran data dalam React Query. Pertama, kita perlu menentukan fungsi pertanyaan untuk mendapatkan senarai artikel. Fungsi pertanyaan ini akan mengembalikan data yang berbeza berdasarkan peranan pengguna dan pemilik artikel.

rrreee

Dalam kod di atas, kami mula-mula mendapatkan maklumat dan peranan pengguna semasa melalui localStorage. Kemudian, URL permintaan yang berbeza dibina berdasarkan peranan pengguna dan pemilik artikel. Akhir sekali, kami menggunakan api.get(url) untuk menghantar permintaan GET untuk mendapatkan data senarai artikel. Gunakan cangkuk useQuery dalam komponen untuk mendapatkan data dan memaparkan kandungan yang sepadan berdasarkan status pemuatan. #🎜🎜##🎜🎜#4 Ringkasan#🎜🎜##🎜🎜#Melalui langkah di atas, kami berjaya melaksanakan kawalan kebenaran data dalam React Query. Dengan mereka bentuk model pangkalan data dan menulis fungsi pertanyaan yang sepadan, kami boleh mengembalikan data yang berbeza mengikut peranan pengguna dan pemilik data. Dengan cara ini, kami boleh melindungi data pengguna dengan berkesan dan melaksanakan kawalan kebenaran dalam logik perniagaan. Sudah tentu, kaedah pelaksanaan khusus boleh diselaraskan dan dikembangkan mengikut keperluan sebenar. Saya harap artikel ini akan membantu anda menggunakan pangkalan data untuk kawalan kebenaran data dalam React Query! #🎜🎜#

Atas ialah kandungan terperinci Menggunakan pangkalan data untuk kawalan kebenaran data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!