Как определить функции в поставщике дочернего контекста из поставщика родительского контекста в React?

Я новичок в реагировании, и я столкнулся с проблемой в Context API, используя

Функциональные компоненты React

Например, у меня есть сценарий, в котором мне нужно разделить поставщиков аутентификации на основе хоста, поскольку все они имеют разный способ логики аутентификации.

У меня есть следующие дочерние поставщики:

i. ChildHostProviderA

ii. ChildHostProviderB

III. ChildHostProviderC

iv. ChildHostProviderD

Мне нужно переключить поставщиков аутентификации с родительского поставщика в зависимости от того, где находится приложение.

Что я сделал, так это создал общий поставщик контекста (ParentHostProvider), который будет переключаться в зависимости от хоста, на котором он находится. Общий поставщик контекста будет иметь следующие функции:

  1. ПолучитьТокенДоступа()
  2. Войти()
  3. SingOut()

Если мне нужно, чтобы эти функции были реализованы в дочерних провайдерах, то как лучше всего это сделать в React?

Я пытался найти много ресурсов в Интернете, но не смог найти ни одного, любая помощь по этому сценарию была бы действительно полезной.


reactjs javascript react-context
person Bhardwaj Avasarala    schedule 03.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если я правильно понимаю, приложение развертывается на разных хостах, и логика аутентификации меняется в зависимости от хоста.

Если это так, вам не нужно включать контекст в эту логику, так как он никогда не изменится для хоста. Это больше связано с Javascript, чем с React.

Вы можете создать файл с именем authenticationFunctions.js со всей логикой различных функций, организованной по имени хоста. Как это:

export default {
  "host1.dev": {
    getAccessToken: () => {
      console.log("host1 get access token");
    },
    signIn: () => {
      console.log("host1 sign in");
    },
    signOut: () => {
      console.log("host1 sign out");
    }
  },
  "759ee.codesandbox.io": {
    getAccessToken: () => {
      console.log("codesandbox.io get access token");
    },
    signIn: () => {
      console.log("codesandbox.io sign in");
    },
    signOut: () => {
      console.log("codesandbox.io sign out");
    }
  }
};

И после этого в своем провайдере вы подберете правильные функции по имени хоста и передадите его провайдеру

import React, { useContext } from "react";
import authenticationFunctions from "./authenticationFunctions";
const UserContext = React.createContext(null);

const hostname = window.location.hostname;
let funs = authenticationFunctions[hostname];
if (!funs) {
  console.error("There is no authenticationFunctions for this host");
}

export default function UserProvider({ children }) {
  return (
    <UserContext.Provider value={funs || {}}>{children}</UserContext.Provider>
  );
}

Вот Codesandbox, демонстрирующий это: https://codesandbox.io/s/authentication-logic-change-according-to-host-759ee?file=/src/UserProvider.js:156-329

person abumalick    schedule 04.08.2020
comment
Спасибо @abumalick, это действительно помогает - person Bhardwaj Avasarala; 05.08.2020
comment
Добро пожаловать! Пожалуйста, проголосуйте за ответ и отметьте его как принятый слева от ответа, если он решил вашу проблему. - person abumalick; 05.08.2020