0

Im experimenting with random theme and "new technology" and Im trying to convert whole front-end to pure JS single page application (no page refreshes - like Facebook, Twitter etc) using WP REST API, Redux.js and React.js and few other helpers.

How to handle logged-in users? How do I keep track of that? I know that this information is normally handled with cookies. How would one check it via JS?

I could just make an ajax call every time route/url changes and use is_user_logged_in() in server-side but it seems primative. Could I access directly to cookie via JS and check it in browser?


  • I gave it a long thought if that's off-topic here but it really seems like a very WP specific question
  • Im just experimenting and trying to push it to a new level, please no "this is a bad idea" comments
  • This seems on the fence. body_class() has logged-in class which you could check for in JS. I think the best bet is to check all these things on init ( or a similar hook ) and localize them to your JS – Howdy_McGee Mar 15 '16 at 20:10
  • @Howdy_McGee This is not going to work because whole DOM is generated via JS/React.js. I could hard-code this class but it can be hacked. Im wondering if there's a more secure way.. – N00b Mar 15 '16 at 20:12
  • Localization may be your best bet then. – Howdy_McGee Mar 15 '16 at 20:13
  • There is also wordpress.stackexchange.com/questions/50165/… and probably more. – fuxia Mar 15 '16 at 22:04
  • @toscho This is not a solution to my problem. wp_localize_script() only checks if user is logged in if page is (re)loaded and might be invalid at some point in single page app (which doesn't require reloading). Im currently thinking if it's possible to: 1. Capture the session name if user logs in, is it possible? 2. Save it as user meta 3. Fetch it and save it as JS variable 4. Check if that session exists by name if needed (which is possible in JS) - e.g with every url/route change. Why I would need to capture the name? Because name (also value) is randomly generated. – N00b Mar 16 '16 at 0:06
1

As you are going to send ajax request from theme (frontend) you need to specify the ajaxurl otherwise it will throw an error "undefined ajaurl"

/**
 * frontend ajax requests.
 */
wp_enqueue_script( 'frontend-ajax', JS_DIR_URI . 'frontend-ajax.js', array('jquery'), null, true );
wp_localize_script( 'frontend-ajax', 'frontend_ajax_object',
    array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    )
);

then in your frontend-ajax.js you can can send ajax request like this

$.ajax({
    url: frontend_ajax_object.ajaxurl,
    type: 'GET',
    data: {
        action: 'register_action_hook',
    },
    success: function( response ) {
        console.log( response );
    },
});

then in your functions.php you can hook your function to the register_action_hook.

add_action( 'wp_ajax_register_action_hook', 'prefix_do_something' );
function prefix_do_something() {
    if ( is_user_logged_in ) {
        // do something
    } else {
        // do something else
    }
}

you can also use the @Howdy_McGee method to localize the is_logged_in variable using

wp_localize_script( 'handler', 'js_object', $array_of_variables );

and accessing it in your js with js_object.variable_name see the @Howdy_McGee answer for reference.

| improve this answer | |
0

You will need to check cookies than (and probably DB) or call a function somehow (maybe ajax or something like that) to check if user is logged in and what user is it. Try looking at the function wp_validate_auth_cookie() at wp-includes/pluggable.php

| improve this answer | |
0

We can localize data whenever we enqueue the scripts:

function localize_vars() {

    // Register your script so we may reference it.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    $js_arr = array( 'logged_in' => is_user_logged_in() );

    // Localize our data
    wp_localize_script( 'some_handle', 'object_name', $js_arr );

    // Enqueue Your Script!
    wp_enqueue_script( 'some_handle' );
}
add_action( 'wp_enqueue_scripts', 'localize_vars' );

We register our script, create an associative array so it can convert it to object properties, localize it, and finally enqueue it as normal. In your JS file you can then check if a user is logged in by referencing the object_name and associative array index:

jQuery( function( $ ) {
    if( object_name.logged_in ) { // True or False 
        /* ... */
    }
} );
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.