[인증 승인] 단일 페이지 애플리케이션과 통합 (React)

React SPA를 호스팅하는 페이지를 제공하려면 사용자 정의 모듈을 구현해야합니다. 이 모듈에는 애플리케이션의 모든 JavaScript 코드도 포함됩니다. 이것이 사이트에서 React를 사용하는 유일한 방법이라면 모듈에있는 모든 것을 번들로 묶어 더 쉽게 만드는 것이 좋습니다.

Drupal에서 사용자 인증 토큰 및 기타 필요한 정보를 검색 할 수 있어야한다고 가정합니다. 그런 다음 사용하여 drupal_add_js()(또는 #attach렌더 배열에서) 애플리케이션에 전달할 수 있습니다 . 그런 다음 애플리케이션은 다음을 사용하여 검색 할 수 있습니다.Drupal.settings

/**
 * Implements hook_menu().
  */
  function MODULE_menu() {
    return [
        'admin/APPLICATION/PATH' => [
              'title' => 'Awesome React Application',
                    'page callback' => 'MODULE_application_page',
                          'access arguments' => 'access administration pages'
                              ]
                                ];
                                }
                                
                                /**
                                 * Page callback for the application page.
                                  *
                                   * @return The page as a render array with #attached JS and CSS code.
                                    */
                                    function MODULE_application_page() {
                                      global $user;
                                        $app_data = clone $user;
                                          unset($app_data->pass);
                                            $app_data->token = MODULE_get_user_token();
                                              $base_assets_path = drupal_get_path('module', 'MODULE');
                                                return [
                                                    '#type' => 'markup',
                                                        '#markup' => '<div id="MODULE-app-container"></div>',
                                                            '#attached' => [
                                                                  'css' => ["$base_assets_path/css/app.css" => ['preprocess' => FALSE]],
                                                                        'js' => [
                                                                                "$base_assets_path/js/app.js" => ['preprocess' => FALSE],
                                                                                        [
                                                                                                  'type' => 'settings',
                                                                                                            'data' => ['MODULE' => $app_data]
                                                                                                                    ]
                                                                                                                          ],
                                                                                                                              ]
                                                                                                                                ];
                                                                                                                                }
                                                                                                                                

출처
https://stackoverflow.com/questions/39917097