Ziel :

Ermöglicht das Hinzufügen einer Authentifizierungsstufe zu einer bestehenden VueJS-Anwendung.

Voraussetzungen :

Sie müssen über eine funktionsfähige vuejs-Anwendung verfügen.
Im Rahmen dieses Tutorials werden wir  restaurant-food-reservation  ( 1.0.1 version de base ) über das Reservierungen vorgenommen werden können.

Sie müssen vee-validate installieren,

Auf Drupal-Ebene müssen Sie Folgendes installieren Login-rx-vuejs

Zunächst wird das Verbindungsmodul installiert. drupal-vuejs. Ce module n'etant pas encore sur npmjs.com, Sie können es lokal herunterladen und wie folgt installieren.( Der Weg "/siteweb/AppVuejs/" muss an Ihre Umgebung angepasst werden. )

npm install /siteweb/AppVuejs/drupal-vuejs
npm install vee-validate@3

NB:  Wir installieren die Version vee-validate@3 denn wir nutzen die vue@2.7.14. ( die Version vee-validate@4 ist kompatibel mit vue@3 ).

Wir identifizieren oder möchten das Authentifizierungsformular hinzufügen. :

Wir möchten, dass, wenn der Benutzer nicht angemeldet ist, wenn er auf die Schaltfläche „Jetzt buchen“ klickt, das Anmeldeformular angezeigt wird. Andernfalls wird der Standardprozess der Anwendung fortgesetzt.

In unserer vuejs-Anwendung ist dies die Datei src/components/MultiStepForm.vue qdie die verschiedenen Schritte verwaltet. Wir werden einen Schritt hinzufügen, der die Verbindung ermöglicht:

auf der Ebene der Vorlage:

...
      <div v-show="currentStep == 3" key="four" class="animate">
        <choose-offer @setReservation="setReservation"></choose-offer>
      </div>
      <!-- </transition-group> -->
    </form>
    <!-- step reservation -->
    <loginRegister
      v-if="show_login_form"
      actionAfterRegister="emit_even_register"
      action-after-login="emit_even"
      :showModalSuccess="false"
      ref="LoginRegister"
    ></loginRegister>
    <!-- steps :
...

Auf Komponentenebene fügen wir hinzu:

...
  components: {
    VueCalendar,
    TimeDisplay,
    NombrePlace,
    ChooseOffer,
    loginRegister: () =>
      import("drupal-vuejs/src/App/components/LoginRegister.vue"),
  },
...

In der Datei main.js fügen wir Folgendes hinzu:

...
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);
//import "drupal-vuejs/src/App/components/vee-validate-custom.js";
import { required, email, alpha } from "vee-validate/dist/rules";
extend("required", {
  ...required,
  Meldung: „Dieses Feld ist erforderlich“,
});
extend("email", email);
extend("alpha", alpha);
...

Auf der Ebene des Eingangs „state“ des Stores fügen wir hinzu:

...
//to login
    form: {
      name: [{ value: "" }],
      mail: [{ value: "" }],
    },
...

Nach diesen Ergänzungen erhielten wir folgendes

Das Verbindungsmodul wird bereits angezeigt.

An dieser Stelle müssen wir das Formular anzeigen, wenn die Bedingungen erfüllt sind. Dazu müssen wir feststellen, ob der Benutzer bereits angemeldet ist, sich gerade anmeldet oder sich neu registriert:

Auf der Ebene der Sektionen "methods" Sie können hinzufügen:

    /**
     * Ermöglicht die Überprüfung,
     */
    check_if_user_connected() {
      document.addEventListener(
        "login_rx_vuejs__user_is_login",
        () => {
          this.getCurrentUser().then((user) => {
            console.log("user : ", user);
            // Fügen Sie hier Ihre Logik hinzu.
          });
        },
        false
      );
    },
    /**
     * Ermöglicht die Überprüfung, ob sich ein Benutzer registriert hat.
     */
    check_if_user_register() {
      document.addEventListener(
        "login_rx_vuejs__user_is_register",
        () => {
          // declanchera l'enenement login_rx_vuejs__user_is_login
          this.$refs.LoginRegister.connexionUser(this.$store.state.form);
        },
        false
      );
    },
    /**
     * Ruft die Informationen des Benutzers ab, wenn dieser angemeldet ist.
     */
    getCurrentUser() {
      return new Promise((resolv, reject) => {
        users
          .getCurrentUser()
          .then((user) => {
            if (user) {
              this.$store.commit("SET_USER", user);
              resolv(user);
            }
          })
          .catch((er) => {
            reject(er);
          });
      });
    },

Fügen Sie im Abschnitt „mounted” Folgendes hinzu:

this.check_if_user_connected();
this.check_if_user_register();
this.getCurrentUser();

Erklärung:

Auf der Ebene des Stores haben wir einen state.user die die Daten des Benutzers enthält.

Wenn sich der Benutzer anmeldet, wird das Ereignis"login_rx_vuejs__user_is_login" ausgelöst und anschließend die Methode getCurrentUser Serra hingerichtet.

Wenn sich der Benutzer registriert, wird das Ereignis "login_rx_vuejs__user_is_register" ausgelöst und anschließend das Ereignis "login_rx_vuejs__user_is_login" ausgelöst werden.

Sie können state.user verwenden, um zu bestimmen, ob das Anmeldeformular angezeigt werden soll.

Test :

Wir werden unser Formular testen:

Wir erhalten eine Fehlermeldung, da wir einige Änderungen an der Drupal-Website vornehmen müssen. 
Wir müssen das Modul aktivieren."restui", und dann die Route "/user/register" 

Anschließend den anonymen Benutzer für den Zugriff auf diese Ressource autorisieren:

und schließlich dem anonymen Benutzer die Erstellung seines Kontos gestattet

An dieser Stelle kann sich der Benutzer anmelden oder ein neues Konto erstellen, und Sie können mit der Geschäftslogik der Anwendung auf Methodenebene fortfahren. check_if_user_connected(). ( voir  restaurant-food-reservation  ( 1.0.2 Version mit Authentifizierung ) )