Verifică dacă utilizatorul este autentificat folosind jQuery

Question

Verifică dacă utilizatorul este autentificat folosind jQuery

19 oct. 2012, 15:40:53

Vizualizări: 83.1K

Voturi: 24

Vreau să execut cod jQuery personalizat care să afișeze un dialog de autentificare utilizatorului dacă face click pe un buton și nu este autentificat. Cum aș putea face asta?

Feras Odeh

435

jquery autentificare jquery ui

Toate răspunsurile la întrebare

Verifică atributul class pentru body: Dacă tema folosește body_class(), elementul body va avea o clasă numită logged-in pentru utilizatorii care sunt autentificați. Atenție, funcția poate fi folosită și pe elementul html.

Exemplu cu jQuery:

if(jQuery('body').hasClass('logged-in')){
    // Fă ceva
}

Exemplu cu JavaScript simplu:

if (document.body.classList.contains('logged-in')) {
    // fă ceva
}

Poți folosi și is_user_logged_in() ca condiție pentru a încărca sau afișa scriptul.

fuxia

107K

19 oct. 2012 15:51:43

Comentarii

nota maximă pentru acest răspuns - simplu și eficient.

Q Studio

21 iul. 2013 00:12:51

îmi place ideea de a verifica pur și simplu body pentru clasa logged-in. Trebuie doar să ne asigurăm că temele folosesc body_class(); sau get_body_class(); Altfel, aceasta nu este o soluție foarte sigură. Totuși, eu folosesc aceste funcții în temele mele, așa că este o soluție bună pentru mine. Mulțumesc pentru ideea simplă.

Michael Ecklund

16 feb. 2017 19:22:46

Comentarii

Care este valoarea lui ajaxurl?

Feras Odeh

24 oct. 2012 22:22:51

Wordpress o setează la 'siteultau.com/wp-admin/admin-ajax.php'. Acesta este URL-ul către care ar trebui trimise toate cererile AJAX

Mridul Aggarwal

24 oct. 2012 22:25:10

Am plasat jQuery.post în interiorul handler-ului de click jQuery dar nu funcționează. Ai vreo idee cum să rezolv problema?

Feras Odeh

24 oct. 2012 22:28:41

Am observat că ajaxurl nu este definit în consolă.

Feras Odeh

24 oct. 2012 22:34:47

Codex spune că în ultimele versiuni de WordPress aceasta este deja definită. Poți încerca să-ți definești propria versiune de ajaxurl cu wp_localize_script

Mridul Aggarwal

24 oct. 2012 22:45:38

Arată celelalte 5 comentarii

Te rog să adaugi body_class() în tag-ul body al tău HTML

<body <?php body_class(); ?>>
   //codul tău html
</body>

Aceasta va adăuga clasa logged-in pentru utilizatorii autentificați, apoi poți folosi următorul cod jQuery pentru a executa codul personalizat doar pentru utilizatorii logați.

if ($('body').hasClass('logged-in')) {
       //execută codul tău jQuery.
}

Monirul Islam

531

19 oct. 2012 17:29:14

Comentarii

Nu știu de ce a fost votat în jos acest răspuns. Abordarea este complet validă. +1

kaiser

31 dec. 2013 13:54:46

Nu știu. Am aceeași întrebare. Răspunsul este valid, dar de ce vot în jos.

Monirul Islam

22 ian. 2014 06:42:35

Hm. Poate pentru că folosește jQuery în loc de metoda corectă (folosind un filtru și callback). Unii oameni sunt alergici la jQuery.

kaiser

22 ian. 2014 16:28:08

bun, dar nu ar afișa starea reală de autentificare dacă folosești un plugin de cache cu cache de pagină activat.

Janos Szabo

19 mar. 2018 09:29:33

Vă rugăm să rețineți că niciunul dintre exemplele de mai sus nu sunt sigure în cazul în care utilizați un plugin de cache pentru pagini, deoarece codul din tag-ul body va fi static. De asemenea, există o metodă simplă de a face acest lucru (fără interogări suplimentare către AJAX, care nu sunt optime).

Dacă doriți să testați starea de autentificare a utilizatorului cu JavaScript, puteți utiliza acest cod pentru a seta un cookie când utilizatorul se autentifică și pentru a șterge cookie-ul când utilizatorul se deconectează. Adăugați acest cod, de exemplu, în fișierul functions.php al temei dumneavoastră.

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');

Apoi, testarea cookie-ului în JavaScript este simplă.

if (document.cookie.indexOf('wp_user_logged_in') !== -1) {
    //fă ceva când utilizatorul este autentificat
} else {
    //fă ceva când utilizatorul nu este autentificat
}

Janos Szabo

181

25 mar. 2018 08:20:00

Comentarii

Acest lucru este într-adevăr destul de simplu, fiabil și în cel mai rău caz se execută aproape instantaneu după încărcarea paginii (dacă încărcați scriptul în footer fără blocarea randării), spre deosebire de alte răspunsuri. Ajax este lent și bazarea pe clasele body va eșua din cauza cache-ului. Trebuie să adăugați acest cookie în textul Politicii de Cookie. Mulțumesc Janos.

Ryszard Jędraszyk

19 apr. 2019 03:13:50

Ca o continuare, există o problemă cu sincronizarea cookie-urilor implicite din WordPress și a noului cookie accesibil prin script, dar am primit un răspuns excelent și simplu despre cum să o rezolv: https://stackoverflow.com/questions/56208574/setting-script-accessible-cookie-expiry-based-on-wordpress-logged-in-cookie

Ryszard Jędraszyk

27 mai 2019 06:58:18

Un alt exemplu, în cazul în care doriți să îl utilizați pentru apeluri AJAX.

// Simplificat... vă rugăm să rețineți că toate numele/variabilele/etc. din clasa mea au denumiri unice.
// ...același lucru este valabil și pentru handler-ul de 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 oct. 2012 16:11:20

Comentarii

De menționat, această abordare nu funcționează în spatele unui CDN. :D

Brian Fegter

30 dec. 2013 18:21:36

@BrianFegter Poate ai vrea să explici (sau să [editezi] în text) de ce? :)

kaiser

31 dec. 2013 02:52:49

Deoarece CDN-ul nu se autentifică cu WordPress, is_user_logged_in va fi stocat în cache ca false în DOM când origin-ul este accesat. Starea utilizatorului ar trebui abstractizată într-un thread fără cache prin XHR atunci când se utilizează un CDN. Abordarea lui @Mridul Aggarwal funcționează, dar cu antete no-cache în răspuns.

Brian Fegter

31 dec. 2013 07:42:19

@BrianFegter Bună observație. Am remediat asta... cred. Am dat vot pozitiv și celorlalte răspunsuri.

kaiser

31 dec. 2013 13:54:20

Mulțumesc acestui articol și unui alt articol, am găsit o soluție pentru problema mea. Postez aici doar în caz că ar putea fi util cuiva.

Funcționează pe site-uri WordPress actuale

Acest cod verifică dacă utilizatorul este autentificat sau nu folosind jQuery. Dacă utilizatorul NU este autentificat, împiedică acțiunea de a face click dreapta pe conținut și de a copia imagini și text.

$(document).ready(function(){

    // dacă utilizatorul nu este autentificat...
    if (!document.querySelector('body.logged-in')){
        //blochează tot conținutul
        disableSelection(document.body);
        // dezactivează click-ul pe imagini
        $('img').bind('contextmenu', function(e){return false;}); 
        console.log('salut');
    }

    // funcție pentru a bloca tot conținutul
    function disableSelection(target){
        $(function() {
             $(this).bind("contextmenu", function(e) {
                 e.preventDefault();
             });
         }); 
         if (typeof target.onselectstart!="undefined") //Pentru IE 
              target.onselectstart=function(){return false}
         else if (typeof target.style.MozUserSelect!="undefined") //Pentru Firefox
              target.style.MozUserSelect="none"
         else //Pentru toate celelalte browsere (ex. Opera)
              target.onmousedown=function(){return false}
         target.style.cursor = "default";
    }
})

Jiyoon

11

17 mar. 2021 17:18:21

Folosesc o metodă alternativă fără ajaxurl și body class. Pur și simplu nu am încredere în clasa body, care s-ar putea să nu existe în toate temele.

În functions.php ar trebui să aveți:

add_action( 'wp_body_open', 'custom_body_open' );

function custom_body_open() {
    $logged_in = is_user_logged_in() ? 'yes' : 'no'; //Funcție WP pentru a verifica dacă utilizatorul este autentificat sau nu
    echo '<div style="display:none" class="user_is_logged_in" data-logged-in="' . $logged_in . '" ></div>';
}

Aceasta creează un div invizibil la începutul tag-ului body cu:

numele clasei "user_is_logged_in" - doar pentru referință jQuery.
stilul "display: none" - face div-ul invizibil. În schimb, puteți folosi CSS: .user_is_logged_in { display: none }
valoarea "data-(logged-in)" "yes" (autentificat) sau "no" (neautentificat). Această valoare va fi verificată ulterior cu jQuery.

În jQuery verific valoarea "data-logged-in" și acționez în consecință:

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

Iată scriptul WordPress care va adăuga o clasă în tag-ul Body în funcție de starea de autentificare a utilizatorului (conectat sau neconectat)

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

raftaar1191

126

27 feb. 2023 13:16:15

Am apreciat toate răspunsurile, dar localizarea scriptului sau verificarea clasei CSS nu ar fi, în opinia mea, cea mai bună practică, întrucât verificarea clasei CSS nu este 100% sigură, iar funcția de localizare a scriptului este, așa cum sugerează și numele, doar pentru localizare.

După WordPress 4.5, cea mai bună soluție ar fi adăugarea unui script inline astfel:

<?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' );

Și apoi, evident, verificăm scope-ul global care este acum, din păcate, poluat de variabila noastră globală isLoggedIn, astfel: window.isLoggedIn

Mel Macaluso

131

16 feb. 2020 18:10:50

Comentarii

Exact asta face wp_localize_script().

Jacob Peattie

17 feb. 2020 02:51:59

@JacobPeattie Da, motivul pentru care au creat wp_add_inline_script() a fost pentru a evita ca oamenii să folosească funcția de localizare a scripturilor pentru a declara variabile globale. După cum sugerează și numele, aceasta este o soluție mai potrivită. De ce să folosim altceva care nu a fost inițial conceput pentru acest scop, când avem o alternativă bună?

Mel Macaluso

17 feb. 2020 11:24:14

Nu pentru asta a fost adăugat. A fost adăugat pentru a suporta adăugarea de fragmente mici de cod executabil înainte sau după un script, pentru a suporta lucruri precum încărcătoarele de fonturi. https://make.wordpress.org/core/2016/03/08/enhanced-script-loader-in-wordpress-4-5/

Jacob Peattie

17 feb. 2020 11:28:45

@JacobPeattie exact, și pentru ce a fost adăugat șirul wp_localize_script()? Poluarea scope-ului global cu variabile globale? Sau pentru a localiza efectiv, așa cum sugerează numele?

Mel Macaluso

17 feb. 2020 12:06:18

Despre ce vorbești? wp_localize_script te forțează să namespace-ui variabilele tale în interiorul unui obiect. Răspunsul tău adaugă o variabilă în scope-ul global fără niciun fel de namespace.

Jacob Peattie

17 feb. 2020 12:27:12

Arată celelalte 1 comentarii

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

În cazul în care doriți să verificați dacă utilizatorul este autentificat în momentul actual, încercați această soluție. Celelalte răspunsuri verifică dacă utilizatorul era autentificat sau nu în momentul în care pagina s-a încărcat, nu în momentul în care rulează JavaScript-ul. Utilizatorul ar fi putut să se autentifice într-un tab separat, de exemplu.

Puneți acest cod în JavaScript-ul vostru

var data = {
    action: 'is_user_logged_in'
};

jQuery.post(ajaxurl, data, function(response) {
    if(response == 'yes') {
        // utilizatorul este autentificat, faceți ce aveți nevoie aici
    } else {
        // utilizatorul nu este autentificat, afișați formularul de autentificare aici
    }
});

Puneți acest cod în 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');