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

rrreee

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!