데이터 권한 제어를 위해 React Query에서 데이터베이스 사용
강력한 React 상태 관리 라이브러리인 React Query는 애플리케이션 데이터를 관리하기 위한 다양한 편리한 기능을 제공합니다. 중요한 기능 중 하나는 데이터 권한 제어를 달성하기 위해 데이터베이스와의 상호 작용을 지원하는 것입니다. 이 글에서는 React Query에서 데이터 권한 제어를 위해 데이터베이스를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.
1. 데이터베이스 디자인
시작하기 전에 먼저 데이터베이스 모델을 디자인해야 합니다. 사용자 테이블과 기사 테이블이라는 두 개의 주요 데이터 테이블이 있는 간단한 블로그 시스템이 있다고 가정합니다. user 테이블에는 사용자에 대한 기본 정보가 저장되고, Article 테이블에는 사용자가 게시한 기사가 저장됩니다. 우리는 다음 두 가지 권한 제어를 구현하기를 희망합니다.
데이터베이스 디자인에서는 기사 테이블에 기사 소유자를 나타내는 추가 필드를 추가할 수 있습니다. 이 필드는 사용자 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
rrreee
위 코드에서는 먼저localStorage
를 통해 현재 사용자의 정보와 역할을 획득합니다. 그런 다음 사용자의 역할과 기사 소유자를 기반으로 다양한 요청 URL이 구성됩니다. 마지막으로 기사 목록 데이터를 얻기 위해 api.get(url)
을 사용하여 GET 요청을 보냅니다. 구성 요소의 useQuery
후크를 사용하여 데이터를 가져오고 로드 상태에 따라 해당 콘텐츠를 렌더링합니다. 🎜🎜4. 요약🎜🎜위 단계를 통해 React Query에서 데이터 권한 제어를 성공적으로 구현했습니다. 데이터베이스 모델을 설계하고 해당 쿼리 함수를 작성함으로써 사용자의 역할과 데이터 소유자에 따라 다른 데이터를 반환할 수 있습니다. 이러한 방식으로 사용자 데이터를 효과적으로 보호하고 비즈니스 로직에 권한 제어를 구현할 수 있습니다. 물론 구체적인 구현 방법은 실제 필요에 따라 조정 및 확장될 수 있습니다. 이 글이 React Query에서 데이터 권한 제어를 위해 데이터베이스를 사용하는 데 도움이 되기를 바랍니다! 🎜위 내용은 React Query에서 데이터 권한 제어를 위해 데이터베이스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!