React Query에서 데이터 권한 제어를 위해 데이터베이스 사용

데이터 권한 제어를 위해 React Query에서 데이터베이스 사용

강력한 React 상태 관리 라이브러리인 React Query는 애플리케이션 데이터를 관리하기 위한 다양한 편리한 기능을 제공합니다. 중요한 기능 중 하나는 데이터 권한 제어를 달성하기 위해 데이터베이스와의 상호 작용을 지원하는 것입니다. 이 글에서는 React Query에서 데이터 권한 제어를 위해 데이터베이스를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

1. 데이터베이스 디자인

시작하기 전에 먼저 데이터베이스 모델을 디자인해야 합니다. 사용자 테이블과 기사 테이블이라는 두 개의 주요 데이터 테이블이 있는 간단한 블로그 시스템이 있다고 가정합니다. user 테이블에는 사용자에 대한 기본 정보가 저장되고, Article 테이블에는 사용자가 게시한 기사가 저장됩니다. 우리는 다음 두 가지 권한 제어를 구현하기를 희망합니다.

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 인스턴스를 생성하고 요청 인터셉터를 설정하여 각 요청에 인증 정보를 추가했습니다. 마지막으로 애플리케이션 전체에서 React Query를 사용하기 위해 애플리케이션의 루트 구성 요소를 QueryClientProvider로 래핑합니다. 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. 데이터 권한 제어 구현

다음으로 React Query에서 데이터 권한 제어를 구현하는 방법을 보여드리겠습니다. 먼저 기사 목록을 가져오기 위한 쿼리 함수를 정의해야 합니다. 이 쿼리 기능은 사용자의 역할과 기사 소유자에 따라 다양한 데이터를 반환합니다.

rrreee

위 코드에서는 먼저 localStorage를 통해 현재 사용자의 정보와 역할을 획득합니다. 그런 다음 사용자의 역할과 기사 소유자를 기반으로 다양한 요청 URL이 구성됩니다. 마지막으로 기사 목록 데이터를 얻기 위해 api.get(url)을 사용하여 GET 요청을 보냅니다. 구성 요소의 useQuery 후크를 사용하여 데이터를 가져오고 로드 상태에 따라 해당 콘텐츠를 렌더링합니다. 🎜🎜4. 요약🎜🎜위 단계를 통해 React Query에서 데이터 권한 제어를 성공적으로 구현했습니다. 데이터베이스 모델을 설계하고 해당 쿼리 함수를 작성함으로써 사용자의 역할과 데이터 소유자에 따라 다른 데이터를 반환할 수 있습니다. 이러한 방식으로 사용자 데이터를 효과적으로 보호하고 비즈니스 로직에 권한 제어를 구현할 수 있습니다. 물론 구체적인 구현 방법은 실제 필요에 따라 조정 및 확장될 수 있습니다. 이 글이 React Query에서 데이터 권한 제어를 위해 데이터베이스를 사용하는 데 도움이 되기를 바랍니다! 🎜

위 내용은 React Query에서 데이터 권한 제어를 위해 데이터베이스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!