relayjs：使用中继进行身份验证，使用哪个突变？

Posted 2023-03-08

【中文标题】relayjs：使用中继进行身份验证，使用哪个突变？

【英文标题】：relayjs: authentication using relay, which mutation to use?

【发布时间】：2015-12-08 16:53:47

【问题描述】：

我目前正在使用 DefaultNetworkLayer 中设置的自定义标头处理中继之外的身份验证。 它是首选方式吗？有没有办法在中继中做到这一点？ 尝试在中继中实现注册功能时我被卡住了：在中继中有以下配置：FIELDS_CHANGE、NODE_DELETE、RANGE_ADD、RANGE_DELETE。所以 RANGE_ADD 是这里唯一适用的，但是我需要一个父级和连接，而我没有新创建的用户......

【参考方案1】：

中继有意与身份验证机制无关，因此通过网络层使用自定义标头是合适的。

至于如何处理登录后响应，此时最好触发全页刷新或重定向，因为 Relay 目前没有办法重置所有内部状态（尽管it is on the list of desirable items） .鉴于查看者身份会极大地影响项目的可见性，因此几乎需要完全重置才能保持正确/稳健的行为。

【讨论】：

那么你会推荐一个静态注册/登录页面吗？

这很可能是最简单的事情。在我参与的一个项目中，我们使用 Relay 构建了新 UI，但使用了旧技术堆栈中现有的登录/注销页面，因为这使我们能够专注于我们最关心的问题（新 UI）。

React Native 怎么样？ “触发整页刷新”不是一个可能的解决方案

【参考方案2】：

存在一个未记录的配置类型，它看起来适合该用例： https://github.com/facebook/relay/issues/237

【参考方案3】：

我的项目也遇到了这个问题，我是这样处理的。 我用这些字段做了一个用户模式

export var GraphQLUser = new GraphQLObjectType(
  name: 'User',
  fields: 
  id: globalIdField('User'), //this id is an immutable string that never change.
  userID: 
    type: GraphQLString,
    description: 'the database user\'s id',
  ,
  name: 
    type: GraphQLString,
    description: 'the name of the user',
  ,
  mail: 
    type: GraphQLString,
    description: 'the mail of the user',
  
)

那么这就是我的根架构上的用户字段的样子

var GraphQLRoot = new GraphQLObjectType(
  user: 
  type: new GraphQLNonNull(GraphQLUser),
  description: 'the user',
  resolve: (root, id, rootValue) => co(function*() 
    var user = yield getUser(rootValue);
    return user;
  )

在您的 Root 架构上，您要求我实现如下 getUser 函数，这是主要的 hack！

const logID = 'qldfjbe2434RZRFeerg'; // random logID that will  remain the same forever for any user logged in, this is the id I use for my FIELD_CHANGE mutation client side

export function getUser(rootValue) 
  //IF there is no userID cookie field, no-one is logged in
  if (!rootValue.cookies.get('userID')) return 
    name: '',
    mail: '',
    id: logID
  ;
  return co(function*() 
    var user =  yield getDatabaseUserByID(rootValue.cookies.get('userID'));
    user.userID = user.id;
    user.id = logID // change the id field with default immutable logID to handle FIELD_CHANGE mutation
    return user;
  )

这里是 loginMutation 客户端

export default class LoginMutation extends Relay.Mutation 
  static fragments = 
    user: () => Relay.QL`
     fragment on User 
      id,
      mail
    `,
  
  getMutation() 
    return Relay.QL`mutationLogin`;
  

  getVariables() 
    return 
      mail: this.props.credentials.pseudo,
      password: this.props.credentials.password,
      id: this.props.user.id
    ;
  
  getConfigs() 
    return [
      type: 'FIELDS_CHANGE',
      fieldIDs: 
        user: this.props.user.id,
      
    ];
  
  getOptimisticResponse() 
    return 
      mail: this.props.credentials.pseudo,
      id: this.props.user.id
    ;
  
  getFatQuery() 
    return Relay.QL`
    fragment on LoginPayload 
      user 
        userID,
        mail,
        name,
      
    
    `;
  

那么这里是loginMutation server端

export var LoginMutation = mutationWithClientMutationId(
  name: 'Login',
  inputFields: 
    mail: 
      type: new GraphQLNonNull(GraphQLString)
    ,
    password: 
      type: new GraphQLNonNull(GraphQLString)
     ,
     id: 
       type: new GraphQLNonNull(GraphQLString)
    
  ,
  outputFields: 
    user: 
      type: GraphQLUser,
      resolve: (newUser) => newUser
    
  ,
  mutateAndGetPayload: (credentials, rootValue) => co(function*() 
    var newUser = yield getUserByCredentials(credentials, rootValue);
    //don't forget to fill your cookie with the new userID (database id)
    rootValue.cookies.set('userID', user.userID);
    return newUser;
  )
);

等等！为了回答您的问题，我使用了 FIELD_CHANGE 突变并共享相同的 id，无论哪个用户登录，用于获取正确用户的真实 id 实际上是 userID。它在我的项目上运行良好。你可以在这里查看Relay-Graphql-repo

PS：您必须将其添加到您的 networkLayer 才能接受 cookie

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('/graphql', 
  credentials: 'same-origin'
  )
);