React Query でのデータ権限制御にデータベースを使用する

React Query でのデータ権限制御のためのデータベースの使用

強力な React 状態管理ライブラリとして、React Query はアプリケーションのデータを管理するための便利な機能を多数提供します。重要な機能の 1 つは、データのアクセス許可制御を実現するためにデータベースとの対話をサポートすることです。この記事では、React Query でデータのアクセス許可を制御するためにデータベースを使用する方法を紹介し、いくつかの具体的なコード例を示します。

1. データベース設計

始める前に、まずデータベース モデルを設計する必要があります。ユーザー テーブルと記事テーブルという 2 つの主要なデータ テーブルを持つ単純なブログ システムがあるとします。 user テーブルにはユーザーに関する基本情報が格納され、article テーブルにはユーザーが公開した記事が格納されます。次の 2 つの権限制御を実装したいと考えています。

1. ユーザーは自分が公開した記事のみを表示できます。
2. 管理者はすべての記事を閲覧できます。

データベース設計の観点から、記事の所有者を表すフィールドを記事テーブルに追加できます。このフィールドには、ユーザー ID など、ユーザーの一意の識別子を指定できます。同時に、ユーザーのロールを表すフィールドをユーザー テーブルに追加することもできます。管理者の役割は、「admin」などの特別な値に設定できます。このようにして、ユーザーの役割と記事の所有者に基づいて権限を制御できます。

2. React Query の設定

React Query を使用する前に、バックエンドとの通信方法を設定する必要があります。 React Query は、REST、GraphQL などの複数の通信メソッドをサポートしています。この例では、RESTful API を使用してバックエンドと通信します。 axios を使用してネットワーク リクエストを行うことができます。簡単な構成例を次に示します。

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

上記のコードでは、まず queryClient インスタンスを作成し、バックエンド API のベース URL を構成します。次に、axios インスタンスを作成し、各リクエストに認証情報を追加するリクエスト インターセプターを設定しました。最後に、アプリケーションのルート コンポーネントを QueryClientProvider でラップして、アプリケーション全体で React Query を使用します。

3. データ パーミッション コントロールの実装

次に、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 フックを使用してデータを取得し、読み込みステータスに基づいて対応するコンテンツをレンダリングします。

4. まとめ

上記の手順により、React Query にデータ権限制御を実装することができました。データベース モデルを設計し、対応するクエリ関数を記述することで、ユーザーの役割とデータの所有者に応じて異なるデータを返すことができます。このようにして、ユーザー データを効果的に保護し、ビジネス ロジックにアクセス許可制御を実装できます。もちろん、具体的な実装方法は実際のニーズに応じて調整および拡張できます。この記事が、React Query でのデータ権限制御にデータベースを使用する際の参考になれば幸いです。

以上がReact Query でのデータ権限制御にデータベースを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。