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

Question

我在 Javascript 中执行了一个查询，以获取我应用程序中当前用户的数据。此查询 returns 当前用户（客户端）的数据，用于使用 Apollo Client 和 GraphQL 检查客户端对我的 React 应用程序中各个页面的访问权限。

但是，对于只有管理员有权访问的页面，在执行此查询时页面会呈现，以便没有管理员权限的用户可以临时查看页面内容。一旦检查了权限并且知道用户没有访问权限，就会产生一个错误页面。

我希望立即生成此错误页面，以便没有权限的客户完全可以查看 none 内容。

// 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 中的页面在检查客户端权限之前呈现

Page in React renders before the clients permissions are checked

javascript

apollo

reactjs

graphql