在檢查客戶端權限之前，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}>
  {({ data, loading, error }) => {
    if (loading) return <Loading />;
    if (error) return <p>ERROR</p>;

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