Verifica se l'utente ha effettuato l'accesso utilizzando jQuery

Question

Verifica se l'utente ha effettuato l'accesso utilizzando jQuery

19 ott 2012, 15:40:53

Visualizzazioni: 83.1K

Voti: 24

Voglio eseguire del codice jQuery personalizzato che mostri una finestra di dialogo per il login quando l'utente clicca su un pulsante e non ha effettuato l'accesso. Come posso farlo?

Feras Odeh

435

jquery login jquery ui

Tutte le risposte alla domanda

Controlla l'attributo class per body: Se il tema utilizza body_class(), l'elemento body avrà una classe chiamata logged-in per gli utenti che hanno effettuato l'accesso. Tieni presente che la funzione può essere utilizzata anche sull'elemento html.

Esempio con jQuery:

if(jQuery('body').hasClass('logged-in')){
    // Fai qualcosa
}

Esempio con JavaScript puro:

if (document.body.classList.contains('logged-in')) {
    // fai qualcosa
}

Puoi anche usare direttamente is_user_logged_in() come condizione per accodare o stampare lo script.

fuxia

107K

19 ott 2012 15:51:43

Commenti

massimi voti per questa risposta - semplice ed efficace.

Q Studio

21 lug 2013 00:12:51

Mi piace l'idea di controllare semplicemente il body per la classe logged-in. Bisogna solo assicurarsi che i temi utilizzino body_class(); o get_body_class(); Altrimenti, non è una soluzione super affidabile. Anche se, io uso queste funzioni nei miei temi, quindi per me è una buona soluzione. Grazie per l'idea semplice.

Michael Ecklund

16 feb 2017 19:22:46

Commenti

Qual è il valore di ajaxurl?

Feras Odeh

24 ott 2012 22:22:51

WordPress lo imposta su 'yoursite.com/wp-admin/admin-ajax.php'. Questo è l'URL su cui tutte le richieste ajax dovrebbero essere inviate

Mridul Aggarwal

24 ott 2012 22:25:10

Ho inserito il jQuery.post all'interno del gestore di click di jQuery ma non funziona. Hai qualche idea su come risolverlo?

Feras Odeh

24 ott 2012 22:28:41

Ho visto che ajaxurl non è definito nella console.

Feras Odeh

24 ott 2012 22:34:47

Secondo il codex nelle ultime versioni di WordPress questo è già definito. Forse puoi definire la tua versione di ajaxurl con wp_localize_script

Mridul Aggarwal

24 ott 2012 22:45:38

Mostra i restanti 5 commenti

Per favore aggiungi body_class() al tuo tag html body

<body <?php body_class(); ?>>
   //il tuo codice html
</body>

Questo aggiungerà la classe logged-in per gli utenti loggati, quindi potrai utilizzare il seguente codice jQuery per eseguire il tuo codice personalizzato solo per gli utenti loggati.

if ($('body').hasClass('logged-in')) {
       //esegui il tuo codice jQuery.
}

Monirul Islam

531

19 ott 2012 17:29:14

Commenti

Non so perché questo sia stato votato negativamente. L'approccio è completamente valido. +1

kaiser

31 dic 2013 13:54:46

Non lo so. Ho la stessa domanda. La risposta è valida ma perché il voto negativo.

Monirul Islam

22 gen 2014 06:42:35

Hm. Forse perché usa jQuery invece del metodo corretto (usando un filtro e la callback). Alcune persone sono allergiche a jQuery.

kaiser

22 gen 2014 16:28:08

buono, ma non indicherebbe lo stato effettivo del login se utilizzi un plugin di caching con la cache delle pagine abilitata.

Janos Szabo

19 mar 2018 09:29:33

Si prega di notare che nessuno degli esempi precedenti è affidabile nel caso in cui si utilizzi un plugin di caching delle pagine, poiché il codice nel tag body sarà statico. Inoltre, esiste un modo semplice per fare questo (senza query aggiuntive ad ajax che non sono ottimali).

Se vuoi testare lo stato di accesso dell'utente con javascript, puoi utilizzare questo codice per impostare un cookie quando l'utente accede e eliminarlo quando esce. Aggiungi questo codice, ad esempio, nel file functions.php del tuo tema.

function login_function() {
    setcookie('wp_user_logged_in', 1, time() + 31556926, '/');
    $_COOKIE['wp_user_logged_in'] = 1;
}
add_action('wp_login', 'login_function');

function logout_function() {
    unset($_COOKIE['wp_user_logged_in']);
    setcookie('wp_user_logged_in', null, -1, '/');
}
add_action('wp_logout', 'logout_function');

Successivamente, è sufficiente testare il cookie in javascript.

if (document.cookie.indexOf('wp_user_logged_in') !== -1) {
    //fai qualcosa quando l'utente è loggato
} else {
    //fai qualcosa quando l'utente non è loggato
}

Janos Szabo

181

25 mar 2018 08:20:00

Commenti

Questa soluzione è davvero semplice, affidabile e nel caso peggiore viene eseguita quasi istantaneamente dopo il caricamento della pagina (se lo script viene caricato nel footer senza bloccare il rendering), a differenza di altre risposte. Ajax è lento e fare affidamento sulle classi del body fallirà con la cache. Bisogna aggiungere questo cookie al testo della Cookie Policy. Grazie Janos.

Ryszard Jędraszyk

19 apr 2019 03:13:50

Come follow-up, c'è un problema con la sincronizzazione dei cookie predefiniti di WordPress e il nuovo cookie accessibile via script, ma ho ricevuto un'ottima e semplice risposta su come risolverlo: https://stackoverflow.com/questions/56208574/setting-script-accessible-cookie-expiry-based-on-wordpress-logged-in-cookie

Ryszard Jędraszyk

27 mag 2019 06:58:18

Un altro esempio, nel caso in cui tu voglia utilizzarlo per chiamate AJAX.

// Semplificato... si prega di notare che tutti i nomi/variabili/etc. nella mia classe hanno nomi univoci.
// ...lo stesso vale per l'handler dello script.
class wpse69814_example
{
    public $response;

    public function __construct()
    {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
        add_action( 'wp_enqueue_scripts', array( $this, 'localize' ), 20 );
    }

    public function enqueue()
    {
        wp_enqueue_script(
            'wpse69814_handler',
            plugins_url( 'url/to/file.js', __FILE__ ),
            array( 'jquery' ),
            filemtime( plugins_dir_path( __FILE__ ).'/path/to/file.js' ),
            true
        );
    }

    public function localize()
    {
        wp_localize_script( 'wpse69814_handler, 'wpse69814_object', array(
            'ajaxurl'    => admin_url( 'admin-ajax.php' ),
            'ajax_nonce' => wp_create_nonce( 'wpse69814_nonce' ),
            'action'     => 'wpse69814-handler-action',
            'data'       => array(
               'is_user_logged_in' => is_user_logged_in(),
            )
         )

    }
}

kaiser

50.8K

19 ott 2012 16:11:20

Commenti

Da notare, questo approccio non funziona dietro un CDN. :D

Brian Fegter

30 dic 2013 18:21:36

@BrianFegter Potresti spiegare (o [modificare] per includere) il perché? :)

kaiser

31 dic 2013 02:52:49

Dato che il CDN non si autentica con WordPress, is_user_logged_in verrà memorizzato nella cache come false nel DOM quando viene raggiunta l'origine. Lo stato dell'utente dovrebbe essere estratto in un thread senza cache via XHR quando si utilizza un CDN. L'approccio di @Mridul Aggarwal funziona ma con header no-cache nella risposta.

Brian Fegter

31 dic 2013 07:42:19

@BrianFegter Ottimo occhio. Sistemato... credo. Ho votato positivamente anche le altre risposte.

kaiser

31 dic 2013 13:54:20

Grazie a questo post e a un altro post, ho trovato una soluzione al mio problema. Lo condivido nel caso possa essere utile a qualcun altro.

Funziona sui siti WordPress attuali

Questo codice verifica se l'utente è loggato o meno utilizzando jQuery. Se l'utente NON è loggato, impedisce di fare clic destro sul contenuto e di copiare immagini e testo.

$(document).ready(function(){

    // se l'utente non è loggato...
    if (!document.querySelector('body.logged-in')){
        //blocca tutto il contenuto
        disableSelection(document.body);
        // disabilita il click destro sulle immagini
        $('img').bind('contextmenu', function(e){return false;}); 
        console.log('hello');
    }

    // funzione per bloccare tutto il contenuto
    function disableSelection(target){
        $(function() {
             $(this).bind("contextmenu", function(e) {
                 e.preventDefault();
             });
         }); 
         if (typeof target.onselectstart!="undefined") //Per IE 
              target.onselectstart=function(){return false}
         else if (typeof target.style.MozUserSelect!="undefined") //Per Firefox
              target.style.MozUserSelect="none"
         else //Per tutti gli altri browser (Opera)
              target.onmousedown=function(){return false}
         target.style.cursor = "default";
    }
})

Jiyoon

11

17 mar 2021 17:18:21

Sto utilizzando un metodo alternativo senza ajaxurl e body class. Semplicemente non mi fido della classe del body, che potrebbe non esistere in tutti i temi.

Nel file functions.php dovresti avere:

add_action( 'wp_body_open', 'custom_body_open' );

function custom_body_open() {
    $logged_in = is_user_logged_in() ? 'yes' : 'no'; //Funzione di WP per verificare se l'utente è loggato o meno
    echo '<div style="display:none" class="user_is_logged_in" data-logged-in="' . $logged_in . '" ></div>';
}

Questo crea un div invisibile all'inizio del tag body con:

nome della classe "user_is_logged_in" - solo per riferimento jQuery.
stile "display: none" - rende il div invisibile. In alternativa puoi usare CSS: .user_is_logged_in { display: none }
valore "data-(logged-in)" "yes" (loggato) o "no" (non loggato). Questo valore verrà poi interrogato con jQuery.

In jQuery chiedo il valore di "data-logged-in" e poi agisco di conseguenza:

jQuery(document).ready(function($) {
    var logged_in = $(".user_is_logged_in").data("logged-in") == 'yes' ? true : false;
    if (logged_in) {
        ...
    }
    else {
        ...
    }
}

Sisalik

11

6 feb 2024 18:46:12

Ecco lo script WordPress che aggiungerà una classe al tag Body in base allo stato di accesso dell'utente (loggato o non loggato)

https://gist.github.com/raftaar1191/55fe297db0724e62883846b3ed31b543

raftaar1191

126

27 feb 2023 13:16:15

Ho apprezzato tutte le risposte ma localizzare lo script o verificare la classe CSS non sarebbe, a mio avviso, la migliore pratica poiché il controllo della classe CSS non è affidabile al 100% e la funzione di localizzazione dello script è, come suggerisce il nome, localizzata.

Dopo WordPress 4.5 la soluzione migliore sarebbe aggiungere uno script inline come segue:

<?php

function detect_login() {
  $isLoggedIn = is_user_logged_in();
  wp_register_script( 'detect_login', '' );
  wp_enqueue_script( 'detect_login');
  wp_add_inline_script( 'detect_login', "var isLoggedIn = $isLoggedIn" );
}

add_action( 'wp_enqueue_scripts', 'detect_login' );

E poi ovviamente verificare l'ambito globale che purtroppo è ora inquinato dalla nostra variabile globale isLoggedIn come segue: window.isLoggedIn

Mel Macaluso

131

16 feb 2020 18:10:50

Commenti

Questo è esattamente ciò che fa wp_localize_script().

Jacob Peattie

17 feb 2020 02:51:59

@JacobPeattie Sì, il motivo per cui hanno creato wp_add_inline_script() è evitare che le persone utilizzino la funzione di localizzazione degli script per dichiarare variabili globali. Come suggerisce il nome, questa è una soluzione più adatta, perché usare qualcos'altro che inizialmente non era destinato a questo scopo quando abbiamo una buona alternativa?

Mel Macaluso

17 feb 2020 11:24:14

Non è per questo che è stato aggiunto. È stato aggiunto per supportare l'inserimento di piccoli frammenti di codice eseguibile prima o dopo uno script, per supportare cose come i caricatori di font. https://make.wordpress.org/core/2016/03/08/enhanced-script-loader-in-wordpress-4-5/

Jacob Peattie

17 feb 2020 11:28:45

@JacobPeattie esattamente, e a cosa serviva la stringa wp_localize_script() aggiunta? Inquinare lo scope globale con variabili globali? O per localizzare davvero come suggerisce il nome?

Mel Macaluso

17 feb 2020 12:06:18

Di cosa stai parlando? wp_localize_script ti obbliga a namespacciare le tue variabili all'interno di un oggetto. La tua stessa risposta aggiunge una variabile allo scope globale senza alcun tipo di namespace.

Jacob Peattie

17 feb 2020 12:27:12

Mostra i restanti 1 commenti

Mridul Aggarwal 6.66K · Accepted Answer · 2012-10-19T16:16:46Z

Se vuoi verificare se l'utente è attualmente loggato, prova questo approccio. Le altre soluzioni controllano se l'utente era loggato al momento del caricamento della pagina, non al momento in cui viene eseguito il javascript. L'utente potrebbe essersi loggato in un'altra scheda, ad esempio.

Inserisci questo nel tuo javascript

var data = {
    action: 'is_user_logged_in'
};

jQuery.post(ajaxurl, data, function(response) {
    if(response == 'yes') {
        // l'utente è loggato, esegui le tue operazioni qui
    } else {
        // l'utente non è loggato, mostra il form di login qui
    }
});

Inserisci questo nel tuo functions.php

function ajax_check_user_logged_in() {
    echo is_user_logged_in()?'yes':'no';
    die();
}
add_action('wp_ajax_is_user_logged_in', 'ajax_check_user_logged_in');
add_action('wp_ajax_nopriv_is_user_logged_in', 'ajax_check_user_logged_in');