0

我正在使用 React、recompose 和 apollo GraphQL

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

在文章中，他使用了静态道具。我需要从我与我的授权组件在 index.js 文件中组成的数据查询中传递道具。

目前我的代码如下所示：

    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)

这是我被抛出错误的地方

我认为它正在尝试在我传递的用户角色数组上找到一个 graphql 道具，而不是在授权上。

4

0 回答 0