Hiding vue component from all users besides owner

Posted 9 months ago by SkyCoder

Lets say I have user profile and this is user image:

    <div class="user-image">
      <img src="{{ $user->image }}">
    </div>

And if I am visiting profile as owner:

    <div class="user-image">
      <img src="{{ $user->image }}">
      <div class="change">
        <input type="file" name="userImage">
      </div>
    </div>

In laravel we can do it with:

    <div class="user-image">
      <img src="{{ $user->image }}">
      @if(auth()->user() && auth()->user()->id === $user->id)
      <div class="change">
        <input type="file" name="userImage">
      </div>
      @endif
    </div>

Now I achieve this in Vue like this:

Template 1 as <user-image>:

    <div class="user-image">
      <img src="{{ $user->image }}">
      <slot name="changeImage"></slot>
    </div>

Template 2 as <change-image>:

    <div class="change">
      <input type="file" name="userImage">
    </div>

Now I use this in profile.blade.php:

    <user-image>
      @if(auth()->user() && auth()->user()->id === $user->id)
      <change-image></change-image>
      @endif
    </user-image>

This works fine, but how can I do this if I use whole front in vue where I do everything in App.vue and then render it to base page?

I guess I can use v-if with something like window.isOwner = true;

And then I add it to vuex store as:

    state: {
      isOwner: window.isOwner;
    }

And use this.$store.state.isOwner with v-if or v-show, but as well we can access state through browser console:

document.getelementbyid('app').__vue__.$store.state.isOwner and change it to true if it is false, and because of it would alter v-if...

So what is the proper way of hiding some element from non owner users within vue components?

Thanks

Please sign in or create an account to participate in this conversation.