Страница в React отрисовывается до того, как проверяются разрешения клиентов - PullRequest
Новая
       11

Страница в React отрисовывается до того, как проверяются разрешения клиентов

0 голосов
/ 24 июня 2019

Я выполнил запрос в Javascript, чтобы получить данные о текущем пользователе в моем приложении. Этот запрос возвращает данные текущего пользователя (клиентов), которые используются для проверки прав доступа клиентов к различным страницам в моем приложении React с использованием Apollo Client и GraphQL.

Однако для страницы, к которой должен иметь доступ только администратор, пока выполняется этот запрос, страница отображается так, что пользователь без прав администратора может временно просматривать содержимое страницы. После того, как разрешения проверены и известно, что пользователь не имеет доступа, создается страница с ошибкой.

Я бы хотел, чтобы эта страница с ошибкой создавалась немедленно, чтобы ни один контент не мог быть просмотрен вообще клиентами, у которых нет разрешения. 

// This is a currentUser.js file that is imported by various React components 
// which uses the query to check permissions

import gql from 'graphql-tag';

export default apolloClient => apolloClient
    .query({
        query: gql`
            query CURRENT_USER {
                name
                age
                gender
                permissions
            }
        `,
    })
    .then(({ data }) => ({ currentUser: data }))
    .catch(() =>
        ({ currentUser: {} }));

// This is a AdministratorPage.jsx file that shouldn't render whilst 
// permissions are checked

import currentUser from '../lib/currentUser';
import React, { Component } from 'react';
import { ApolloConsumer } from 'react-apollo';

class AdministratorPage extends Component {

    render() {
        return (
            <ApolloConsumer>
                {(client) => {
                currentUser(client).then((data) => { ...}

Есть идеи?

1 Ответ

0 голосов
/ 24 июня 2019

Вы должны визуализировать загрузочную страницу или какой-то индикатор загрузки, пока не будут получены текущие данные пользователя.Попробуйте что-то вроде этого в вашем render методе: 

<Query query={GET_CURRENT_USER}>
  {({ data, loading, error }) => {
    if (loading) return <Loading />;
    if (error) return <p>ERROR</p>;

    return (
      <AdministratorPage />
    );
  }}
</Query>
...