react+apollo+prisma入門demo構築---5、認証

react+apollo+prisma入門demo構築—5、認証
HOW TO GRAPHQL公式サイトの例によると、最新版への変更を行い、最新フレームワークの学習に適している.
このシリーズの文章は先端の方面の開発を重視して、nodeの方面に対して次のシリーズに置きます.この過程の中でいかなる問題があって、すべて評論の中で質問することを歓迎して、直ちにフィードバックします
シリーズディレクトリ:
第一章フロンテンドは第2章を始めた.Queriesコンポーネント作成(Loading Links)第3章.Mutationsコンポーネント作成(Creating Links)第4章.ページルーティング第5章.認証
より包括的な読者の世話をするために、私はできるだけ詳しく書いて、熟練した開発者は迅速に選択的に読むことができます.
ページルーティング
このセクションでは、Apolloを使用して認証機能を実装し、ユーザーに登録およびログイン機能を提供する方法について説明します.
Loginコンポーネントの準備
componentsフォルダにLoginを作成します.jsファイル

import React, { Component } from 'react'
import { AUTH_TOKEN } from '../constants'

class Login extends Component {
  state = {
    login: true, // switch between Login and SignUp
    email: '',
    password: '',
    name: '',
  }

  render() {
    const { login, email, password, name } = this.state
    return (
      

        
{login ? 'Login' : 'Sign Up'}
        

          {!login && (
             this.setState({ name: e.target.value })}
              type="text"
              placeholder="Your name"
            />
          )}
           this.setState({ email: e.target.value })}
            type="text"
            placeholder="Your email address"
          />
           this.setState({ password: e.target.value })}
            type="password"
            placeholder="Choose a safe password"
          />
        
        

          
 this._confirm()}>
            {login ? 'login' : 'create account'}
          
          
 this.setState({ login: !login })}
          >
            {login
              ? 'need to create an account?'
              : 'already have an account?'}
          
        
      
    )
  }

  _confirm = async () => {
    //         
  }

  _saveUserData = token => {
    localStorage.setItem(AUTH_TOKEN, token)
  }
}

export default Login

このコンポーネントはthisを通過する.state.loginステータスは、ログインと登録ページの切り替えを実現するが、ステータスがtrueの場合、ページには2つの入力ボックスしかないログインページが表示され、ステータスがfalseになった場合、3つの入力ボックスの登録ページが表示される.
_confirm関数は、ログイン機能に送信する必要がある変更要求を実現するために使用されます.次はconstantsが必要ですjsファイルは、ブラウザのlocalStorageに格納されている証明書のkeyを定義します.
srcディレクトリの下にconstantsを新規作成します.jsファイル

export const AUTH_TOKEN = 'auth-token'

次に、新しいLoginコンポーネントをルーティングに追加し、Appを開きます.js

Loginコンポーネントの導入

import Login from './Login'

最後に、HeaderコンポーネントにLoginにジャンプできるナビゲーションを追加します.

render() {
  const authToken = localStorage.getItem(AUTH_TOKEN)
  return (
    

      

        
Hacker News
        
          new
        
        {authToken && (
          

            
|
            
              submit
            
          
        )}
      
      

        {authToken ? (
          
 {
              localStorage.removeItem(AUTH_TOKEN)
              this.props.history.push(`/`)
            }}
          >
            logout
          
        ) : (
          
            login
          
        )}
      
    
  )
}

Headerの右側には、Loginコンポーネントへのナビゲーションを追加し、ユーザーがログインしているかどうかを判断し、ログインしていない場合はcreateページのナビゲーションを提供しません
Headerに必要な依存を導入することを忘れないでください

import { AUTH_TOKEN } from '../constants'

認証された変更の使用
登録とログインは2つの通常のGraphQL変更であり、以前のcreateLink変更のように使用することができます.開くjs、前に2つの変更定義を追加

const SIGNUP_MUTATION = gql`
  mutation SignupMutation($email: String!, $password: String!, $name: String!) {
    signup(email: $email, password: $password, name: $name) {
      token
    }
  }
`

const LOGIN_MUTATION = gql`
  mutation LoginMutation($email: String!, $password: String!) {
    login(email: $email, password: $password) {
      token
    }
  }
`

同時にclassNameがflex mt 3のdivに次のコードを追加します.

   this._confirm(data)}
  >
    {mutation => (
      

        {login ? 'login' : 'create account'}
      
    )}
  
  
 this.setState({ login: !login })}
  >
    {login ? 'need to create an account?' : 'already have an account?'}
  

必要な依存関係を追加

import { Mutation } from 'react-apollo'
import gql from 'graphql-tag'

いよいよ実現しますconfirm関数だ

_confirm = async data => {
  const { token } = this.state.login ? data.login : data.signup
  this._saveUserData(token)
  this.props.history.push(`/`)
}

これで私たちは基本的にアイデンティティ機能付きのLoginコンポーネントを実現しました.次はApolloがどのように協力するかです.
認証tokenを使用してApolloを構成
tokenを手に入れることができる以上、tokenを各リクエストに追加する必要があります.Apolloは、ミドルウェアの概念を使用してすべての要求を検証することによって、Apollo Linkとして実現する良い方法を提供している.依存を追加しましょう

yarn add apollo-link-context

そしてindexを改造する必要がありますjsは、httpLinkとApolloClientインスタンスを作成する間に、次のコードを配置します.

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem(AUTH_TOKEN)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
})

そして依存を導入する

import { setContext } from 'apollo-link-context'
import { AUTH_TOKEN } from './constants'

このミドルウェアは、ApolloClientがサーバに要求を送信するたびに呼び出されます.
Note:Apolloの認証についてもっと知りたいなら、ここをクリックしてください.
次に、linkがapollo clientに正しく構成されていることを確認します.

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

今tokenが存在する場合、私たちが送信したすべてのリクエストは認証に合格します.
サービス側で認証を有効にする
認証されたユーザーのみが新しいリンクを発行できることを確認する必要があります.そのため、サービス側で小さな変更をして/server/src/resolvers/Mutationを開く必要があります.js、post関数を見つけて、以下に変更します

function post(parent, args, context) {
  const userId = getUserId(context)
  return context.prisma.createLink({
    url: args.url,
    description: args.description,
    postedBy: { connect: { id: userId } },
  })
}

要求されたAuthorization headerからuserIdを抽出し、linkのpostedBy属性として送信します.
2つのサービスを再起動し、ログインアカウントを登録し、createリクエストを送信してみましょう.現在、createリクエストをLinkListページに戻すと、さっき追加したものは表示されません.手動でリフレッシュする必要があります.これは後でこの問題を解決します.
このセクションでは、ページの認証構成に成功しました.すぐに次の旅を始めましょう.
本章プロジェクトgithubブランチアドレス
https://github.com/zust-hh/simple-hackernews/tree/Frontend-topic5