@8base/auth-provider 中文文档教程

Question

8base Auth Provider

8base Auth Provider 库包含具有身份验证状态的提供程序

AuthProvider

Table of Contents

• AuthProvider
• AuthContextProps
  • Properties
• withAuth
  • Parameters

AuthProvider

Extends Component

提供对身份验证状态的访问。

AuthContextProps

身份验证上下文

Properties

• isAuthorized boolean?
• authState AuthState?
• setAuthState function (AuthState): void?

withAuth

Hoc 将身份验证状态传递给组件

Parameters

• WrappedComponent React$ComponentType<any>
• auth AuthContextProps Auth state passed by the props.

返回 React$ComponentType

Usage

Simple Usage

import { AuthProvider, AuthConsumer } from '@8base/auth-provider';

  <AuthProvider>
    ...
      <AuthConsumer>
        {
          (auth: AuthContextProps) => (<div />)
        }
      </AuthConsumer>
    ...  
  </AuthProvider>

Usage with @8base/create-apollo-client, @8base/apollo-links and @8base/apollo-provider

import React, { Component } from 'react';
import { BatchHttpLink } from 'apollo-link-batch-http';
import { withAuth } from '@8base/auth-provider';
import { createApolloClient } from '@8base/create-apollo-client';
import { ApolloProvider } from '@8base/apollo-provider';
import { createAuthLink,  fileUploadLink } from '@8base/apollo-links';

withAuth(
  class extends Component {
    getClient: Function;

    constructor(props: AsyncApolloProviderProps) {
      super(props);

      this.getClient = createApolloClient({
        links: [
          fileUploadLink,
          createAuthLink({
            getAuthState: this.getAuthState,
            getRefreshTokenParameters: this.getRefreshTokenParameters,
            onAuthSuccess: this.onAuthSuccess,
            onAuthError: this.onAuthError,
          }),
          new BatchHttpLink({ uri: process.env.REACT_APP_SERVER_URL }),
        ],
      });
    }

    getRefreshTokenParameters = () => {
      const { auth: { authState: { email, refreshToken }}} = this.props;

      return { email, refreshToken };
    }

    onAuthSuccess = ({ refreshToken, idToken }) => {
      const { auth: { setAuthState }} = this.props;

      setAuthState({
        idToken,
        refreshToken,
      });
    }

    onAuthError = (err) => {
      const { auth: { setAuthState }} = this.props;

      setAuthState({
        idToken: '',
        refreshToken: '',
      });
    }

    getAuthState = () => {
      const { auth: { authState: { idToken, organizationId, accountId }}} = this.props;

      return {
        idToken,
        organizationId,
        accountId,
      };
    }

    render() {
      const { children } = this.props;

      return (
        <ApolloProvider
          getClient={ this.getClient }
          uri={ process.env.REACT_APP_SERVER_URL }
        >
          { ({ apolloClient, isLoading }) => (<div />) }
        </ApolloProvider>
      );
    }
  }
)