在检查客户端权限之前 React 中的页面呈现

Question

我在 Javascript 中执行了一个查询来获取我的应用程序中当前用户的数据。此查询返回当前用户（客户端）的数据，这些数据用于使用 Apollo Client 和 GraphQL 检查我的 React 应用程序中各个页面的客户端访问权限。但是，对于只有管理员有权访问的页面，在进行此查询时，页面会呈现，以便没有管理员权限的用户可以临时查看页面的内容。一旦检查了权限并且知道用户没有访问权限，就会产生一个错误页面。我希望立即生成此错误页面，以便没有权限的客户根本无法查看任何内容。// This is a currentUser.js file that is imported by various React components // which uses the query to check permissionsimport 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 checkedimport 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) => { ...}有任何想法吗？

Answer 1

您应该呈现加载页面或某种加载指示器，直到获取当前用户数据。在你的render方法中尝试这样的事情：

<Query query={GET_CURRENT_USER}>

  {({ data, loading, error }) => {

    if (loading) return <Loading />;

    if (error) return <p>ERROR</p>;

    return (

      <AdministratorPage />

    );

  }}

</Query>