Hiding vue component from all users besides owner

Posted 7 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.

Reply to

Use Markdown with GitHub-flavored code blocks.