Utilisation de la base de données pour le contrôle des autorisations de données dans React Query

Utilisez la base de données dans React Query pour le contrôle des autorisations de données

En tant que puissante bibliothèque de gestion d'état React, React Query fournit de nombreuses fonctionnalités pratiques pour gérer les données d'application. L'une des fonctionnalités importantes est de prendre en charge l'interaction avec la base de données pour obtenir un contrôle des autorisations de données. Cet article expliquera comment utiliser la base de données pour le contrôle des autorisations de données dans React Query et fournira quelques exemples de code spécifiques.

1. Conception de base de données

Avant de commencer, nous devons d'abord concevoir notre modèle de base de données. Supposons que nous ayons un système de blog simple avec deux tables de données principales : la table des utilisateurs et la table des articles. La table user stocke les informations de base sur les utilisateurs et la table article stocke les articles publiés par les utilisateurs. Nous espérons mettre en œuvre les deux contrôles d'autorisation suivants :

1. Les utilisateurs ne peuvent consulter que les articles publiés par eux-mêmes.
2. L'administrateur peut voir tous les articles.

Dans la conception de bases de données, nous pouvons ajouter un champ supplémentaire à la table des articles pour représenter le propriétaire de l'article. Ce champ peut être un identifiant unique pour l'utilisateur, tel que l'identifiant de l'utilisateur. Dans le même temps, nous pouvons également ajouter un champ à la table utilisateur pour représenter le rôle de l'utilisateur. Le rôle de l'administrateur peut être défini sur une valeur spéciale, telle que « admin ». De cette manière, nous pouvons contrôler les autorisations en fonction du rôle de l'utilisateur et du propriétaire de l'article.

2. Configurer React Query

Avant d'utiliser React Query, nous devons configurer la façon dont il communique avec le backend. React Query prend en charge plusieurs méthodes de communication, telles que REST, GraphQL, etc. Dans cet exemple, nous utiliserons une API RESTful pour communiquer avec le backend. Nous pouvons utiliser axios pour faire des requêtes réseau. Voici un exemple de configuration simple :

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

Dans le code ci-dessus, nous créons d'abord une instance queryClient et configurons l'URL de base de l'API backend. Nous avons ensuite créé une instance axios et mis en place un intercepteur de requêtes pour ajouter des informations d'authentification à chaque requête. Enfin, nous encapsulons le composant racine de l'application avec QueryClientProvider pour utiliser React Query dans toute l'application. 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. Implémenter le contrôle des autorisations de données

Ensuite, nous montrerons comment implémenter le contrôle des autorisations de données dans React Query. Tout d’abord, nous devons définir une fonction de requête pour obtenir une liste d’articles. Cette fonction de requête renverra différentes données en fonction du rôle de l'utilisateur et du propriétaire de l'article.

rrreee

Dans le code ci-dessus, nous obtenons d'abord les informations et le rôle de l'utilisateur actuel via localStorage. Ensuite, différentes URL de requête sont construites en fonction du rôle de l'utilisateur et du propriétaire de l'article. Enfin, nous utilisons api.get(url) pour envoyer une requête GET afin d'obtenir les données de la liste d'articles. Utilisez le hook useQuery dans le composant pour obtenir les données et restituer le contenu correspondant en fonction de l'état de chargement. 🎜🎜4. Résumé🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès le contrôle des autorisations de données dans React Query. En concevant le modèle de base de données et en écrivant les fonctions de requête correspondantes, nous pouvons renvoyer différentes données selon le rôle de l'utilisateur et le propriétaire des données. De cette façon, nous pouvons protéger efficacement les données des utilisateurs et mettre en œuvre un contrôle des autorisations dans la logique métier. Bien entendu, la méthode de mise en œuvre spécifique peut être ajustée et étendue en fonction des besoins réels. J'espère que cet article vous aidera à utiliser la base de données pour le contrôle des autorisations de données dans React Query ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!