React、Apollo 2、GraphQL、身份验证系统

Posted 2023-03-10

【中文标题】React、Apollo 2、GraphQL、身份验证系统

【英文标题】：React, Apollo 2, GraphQL, Authentication system

【发布时间】：2018-05-23 15:46:06

【问题描述】：

我有这个代码：https://codesandbox.io/s/507w9qxrrl

我不明白：

1) 如何重新渲染() Menu 组件后：

this.props.client.query(
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
);

如果我 login() 我希望我的 Menu 组件重新渲染() 本身。但什么都没有。如果我点击主页链接，它会重新渲染（）。我怀疑是因为我正在使用它来渲染它：

<Route component=Menu />

将它包含在 react-router 道具中。错了吗？

2) 如何防止Menu组件在未认证的情况下查询（例如：localStorage中没有token）；我在Menu 组件中使用此代码：

export default graphql(CURRENT_USER_QUERY)(Menu);

3) 这是正确的方法吗？

【问题讨论】：

为什么要重新渲染组件？它不会，因为它没有使用内部使用 client.watchQuery 的 graphql HoC。 Yuu 正在使用 client.query 一次来获取一些数据。改变那条数据的更改不会触发重新渲染。

【参考方案1】：

我会考虑将 CURRENT_USER_QUERY 移动到您的 App.jsx 组件中。这将类似于我在下面的内容。

MyAppContainer 是我的父组件。它检查用户是否已登录。然后它可以获取查询结果并将用户/角色传递给子组件（即您的情况下的 Menu.jsx）。通过这种方式，您可以检查用户是否已登录，然后更改要显示的组件

const loggedInUser = gql`
  query loggedInUser
    user 
      id
      role
    
  `


export default graphql(loggedInUser,  options: fetchPolicy: 'network-only' )(AppContainer)

这是一个更完整的 AppContainer.jsx 示例

import React from 'react';
import  graphql  from 'react-apollo';
import  Route, Switch, Redirect  from 'react-router-dom';

import AppNav from 'AppNav';
import ExampleContainer from 'ExampleContainer';
import ExampleContainerTwo from 'ExampleContainerTwo';
import LoginPage from 'LoginPage';

const AppContainer = ( data ) => 
  if (data.loading) 
    return <div>Loading...</div>
  

  //checks if user is logged in
  if (data.user) 
    return (
      <div id="app-container">
        <AppNav adminUser=data.user.role === 'ADMIN' ? true : false />
        <div className="content">
          <Switch>
            <Route exact path="/app/" component=ExampleContainer />
            <Route path="/app/example-two" component=ExampleContainerTwo />
          </Switch>
        </div>
      </div>
    )
  

  return <LoginPage handleUserLoggedIn=() => data.refetch() />


const loggedInUser = gql`
      query loggedInUser
        user 
          id
          role
        
      `

export default graphql(loggedInUser,  options: fetchPolicy: 'network-only' )(AppContainer)