在检查客户端权限之前 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 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) => { ...}

有任何想法吗？

Answer 1

您应该呈现加载页面或某种加载指示器，直到获取当前用户数据。在你的render方法中尝试这样的事情：<Query query={GET_CURRENT_USER}>&nbsp; {({ data, loading, error }) => {&nbsp; &nbsp; if (loading) return <Loading />;&nbsp; &nbsp; if (error) return <p>ERROR</p>;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <AdministratorPage />&nbsp; &nbsp; );&nbsp; }}</Query>