Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

fsdolphin's avatar

Show / Hide button if user is logged with Laravel and Vue.js

Hi,

I would like to hide/show a button if the user is logged or logged-off. How is this typically done.

Can someone show me a quick example on how this is typically done?

This is the logic I have in mind...

  1. In the controller check if user is logged.
  2. Send value to view.
  3. Capture value in the view with Vuejs to Show/Hide the button. I'm not sure how to do this part.

Does this sound like the right logic?

Here is what I have...

CONTROLLER

public function home()
{
    $isUserLogged = false;
    if (Auth::check()) {
        $isUserLogged = true;
    }
    return view('homeView', compact('isUserLogged'));
}

HTML

<button type="button" class="myButton">Show/Hide Button</button>

Thanks

0 likes
10 replies
harryg's avatar

Why not just do it all in the view?

@if(Auth::check())
    <button type="button" class="myButton">Show/Hide Button</button>
@endif

If you don't want to call the Auth facade in your views, but still want to keep your controllers clean (you will probably need to know if a user is logged in in many views) you can use a view composer.

Generate a new service provider (e.g. ViewServiceProvider), add it to the list of providers in config/app.php and place something like this in the boot method:

    view()->composer(function ($view) {            
        $view->with('isLoggedIn', Auth::check());
    });

Now an $isLoggedIn variable is available in all your views.

See the docs for more info, or jeffery did a laracast on it

2 likes
fsdolphin's avatar

@harryg Thanks a lot for your suggestions, they seem reasonable the only concern I have is that according to MVC is better to do your logic in the controller (I think). And to be quite honest I would like to see how this is done using Laravel and Vuejs since I want to start understanding how the communication between Laravel and Javascript is typically done.

harryg's avatar
harryg
10 years ago
Best Answer
Level 5

@fsdolphin sure, but it's usually better to keep your controllers thin. They are just to send messages from one service to another and provide an http response. In this case the "logic" is checking if a user in logged in, which is achieved in two words by the Auth facade - this is absolutely fine in the view. The one thing you don't want is the same unnecessary conditional statement repeated throughout many controller methods, which is what the view composer is for: it feeds the views with any common data you want it to without cluttering your controllers.

If you want Vue to have access to user login status the easiest is to define a javascript variable in your view:

<script>var userIsLoggedIn = {{ Auth::check() }};</script>

although this isn't the most elegant as it's not nice to have blade tags in inline js.

An alternative is to have vue hit some api route that checks if the user is logged in but this seems overkill.

You could also check out this laracast on passing data to your javascript.

Update: I thought I'd add one alternative that is still simple yet slightly less nasty than embedded blade tags in your script tags, which requires inline javascript. This is covered in the above video.

Essentially define an html element like so:

<meta name="login-status" content="{{ Auth::check() }}">
<input type="hidden" id="login-status" data-login-status ="{{ Auth::check() }}">

If you use a meta tag it should be placed in the <head> section. The input tag is more flexible as it can go anywhere in the body. I've used a data attribute in this case but you could use value instead. For the case of being logged in the meta tag is probably the way to go as you can put this in your layout file and it'll be available everywhere.

Then just fetch the value in your js. E.g. using jQuery:

var isLoggedIn = $("meta[name=login-status]").attr('content'); // for the meta field method, or:
var isLoggedIn = $("input#login-status").data('login-status');  // for a hidden input

Now you can place this js logic in your external js file.

jekinney's avatar

@fsdolphin

You need to understand with JavaScript and php they are two completely separate entities. Obviously php is server side and starts when a request is sent to the server and stops when the request is sent. Where JavaScript is (for this example) is client side. JavaScript runs when the request is sent and doesn't stop till a new request is sent for a different page or browser is closed.

The two can't directly communicate. You have to have some go between like an Ajax call or the data in the html on a element that you set php to output data and JavaScript then finds that data. Which one depends on what's needed and what your doing with the data in your view. No need to pass an eloquent model to your view and Ajax to get the same data.

1 like
fsdolphin's avatar

@jekinney
Thank you for your info. Have you ever used Jeffrey's "PHP-Vars-To-Js-Transformer"?

theFinalArbiter's avatar

Coming back to this post, I had to do

var userIsLoggedIn = {{ Auth::check() ? "true" : "false" }};

Please or to participate in this conversation.