Question

我正在使用React，重构和apollo GraphQL

我正在尝试创建UI授权（后端身份验证也将在那里）以允许具有特定角色的用户输入只有他们有权进入的页面。我要找一个我觉得有帮助的article。

在文章中，他使用静态道具。我需要从我在index.js文件中与Authorization组件一起编写的数据查询中传递道具。

目前我的代码如下所示：

    import React from 'react'
    import { Redirect } from 'react-router-dom'

    const Authorization = ({ props }) => allowAccess => MyComponent => {

      const { viewer: { role } } =  props.data

      return (
        ( allowAccess.include(role) ) ? <MyComponent /> : <Redirect to="/" />
      )
    }

    export default Authorization

在另一个文件中，我创建了包含允许访问页面的角色的变量，与上面引用的文章相同：

    export const admin = ['owner', 'admin']
    export const user = ['owner', 'admin', 'user']

然后我将此文件和我的Auth导入我定义路线的文件中。我做的与作者在文章中所做的相同，并根据允许查看页面的人来定义将包装路径组件的角色：

    const Admin = Authorization(admin)
    const User = Authorization(user)

This is where I'm being thrown an error

我想到它正在发生的事情是它试图在我传递的用户角色数组上找到一个graphql道具而不是授权。

尝试使用curry函数创建HOC，但也需要接受GraphQL数据道具（react，apollo，GraphQL，重构）

0 个答案: