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>

在检查客户端权限之前，React中的页面会渲染

1 个答案: