Verwendung der Datenbank zur Datenberechtigungskontrolle in React Query

Verwenden Sie die Datenbank in React Query zur Datenberechtigungskontrolle

Als leistungsstarke React-Statusverwaltungsbibliothek bietet React Query viele praktische Funktionen zum Verwalten von Anwendungsdaten. Eine der wichtigen Funktionen besteht darin, die Interaktion mit der Datenbank zu unterstützen, um eine Kontrolle der Datenberechtigungen zu erreichen. In diesem Artikel wird die Verwendung der Datenbank zur Datenberechtigungssteuerung in React Query vorgestellt und einige spezifische Codebeispiele bereitgestellt.

1. Datenbankdesign

Bevor wir beginnen, müssen wir zuerst unser Datenbankmodell entwerfen. Angenommen, wir haben ein einfaches Blogsystem mit zwei Hauptdatentabellen: Benutzertabelle und Artikeltabelle. In der Benutzertabelle werden grundlegende Informationen über Benutzer gespeichert, und in der Artikeltabelle werden von Benutzern veröffentlichte Artikel gespeichert. Wir hoffen, die folgenden zwei Berechtigungskontrollen implementieren zu können:

1. Benutzer können nur von ihnen selbst veröffentlichte Artikel anzeigen.
2. Administrator kann alle Artikel anzeigen.

Im Datenbankdesign können wir der Artikeltabelle ein zusätzliches Feld hinzufügen, um den Eigentümer des Artikels darzustellen. Dieses Feld kann eine eindeutige Kennung für den Benutzer sein, beispielsweise die Benutzer-ID. Gleichzeitig können wir der Benutzertabelle auch ein Feld hinzufügen, um die Rolle des Benutzers darzustellen. Die Rolle des Administrators kann auf einen speziellen Wert festgelegt werden, beispielsweise „admin“. Auf diese Weise können wir Berechtigungen basierend auf der Rolle des Benutzers und dem Eigentümer des Artikels steuern.

2. React Query konfigurieren

Bevor wir React Query verwenden, müssen wir konfigurieren, wie es mit dem Backend kommuniziert. React Query unterstützt mehrere Kommunikationsmethoden wie REST, GraphQL usw. In diesem Beispiel verwenden wir eine RESTful-API, um mit dem Backend zu kommunizieren. Wir können Axios verwenden, um Netzwerkanfragen zu stellen. Hier ist ein einfaches Konfigurationsbeispiel:

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')
);

Im obigen Code erstellen wir zunächst eine queryClient-Instanz und konfigurieren die Basis-URL der Backend-API. Anschließend haben wir eine Axios-Instanz erstellt und einen Anforderungs-Interceptor eingerichtet, um jeder Anforderung Authentifizierungsinformationen hinzuzufügen. Schließlich umschließen wir die Stammkomponente der Anwendung mit QueryClientProvider, um React Query in der gesamten Anwendung zu verwenden. 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. Datenberechtigungskontrolle implementieren

Als nächstes zeigen wir, wie man die Datenberechtigungskontrolle in React Query implementiert. Zuerst müssen wir eine Abfragefunktion definieren, um eine Liste von Artikeln zu erhalten. Diese Abfragefunktion gibt je nach Rolle des Benutzers und Eigentümer des Artikels unterschiedliche Daten zurück.

rrreee

Im obigen Code erhalten wir zunächst die Informationen und die Rolle des aktuellen Benutzers über localStorage. Anschließend werden basierend auf der Rolle des Benutzers und dem Eigentümer des Artikels unterschiedliche Anforderungs-URLs erstellt. Schließlich verwenden wir api.get(url), um eine GET-Anfrage zu senden, um die Artikellistendaten zu erhalten. Verwenden Sie den Hook useQuery in der Komponente, um die Daten abzurufen und den entsprechenden Inhalt basierend auf dem Ladestatus zu rendern. 🎜🎜4. Zusammenfassung🎜🎜Durch die oben genannten Schritte haben wir die Datenberechtigungskontrolle in React Query erfolgreich implementiert. Durch den Entwurf des Datenbankmodells und das Schreiben entsprechender Abfragefunktionen können wir je nach Benutzerrolle und Dateneigentümer unterschiedliche Daten zurückgeben. Auf diese Weise können wir die Daten der Benutzer effektiv schützen und die Berechtigungskontrolle in der Geschäftslogik implementieren. Natürlich kann die spezifische Implementierungsmethode entsprechend den tatsächlichen Anforderungen angepasst und erweitert werden. Ich hoffe, dieser Artikel hilft Ihnen dabei, die Datenbank für die Datenberechtigungskontrolle in React Query zu verwenden! 🎜

Das obige ist der detaillierte Inhalt vonVerwendung der Datenbank zur Datenberechtigungskontrolle in React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!