1

I have laravel/vue.js application which upon first page load returns structure like this

 <script>
        window.settings = {};
        window.settings.user = {};
        window.settings.user.timezone = 'Europe/Moscow';
        window.settings.user.permissions = {"user.create":false,"user.show":true,"user.update":false};
    </script>

And there will be many permissions.

What is the best place to put function which will be used on every page?

This function checks if current user (based on windows.settings.user.permissions) can do something.

I think I can place it inside VueX

const store = new Vuex.Store({
 getters: {
    currentUserCan(perm) {
        return window.settings.user.permissions[perm];
    }
});

And then in template

<div v-if='$store.getters.currentUserCan("user.create")'>
    <a href='#' @click.prevent='createUser'>Create new user</a>
</div>

May be there is a better solution?

P.S.

Here is how settings are returned from laravel (header of any page)

 @if (Auth::user())
     <script>
         window.settings = {};
         window.settings.user = {};
         window.settings.user.timezone = '{{ Auth::user()->timezone }}';
         window.settings.user.permissions = {!! json_encode(Auth::user()->getAllPermissions()); !!};
     </script>
 @endif
Jackson J
  • 1,463
  • 3
  • 17
  • 34

1 Answers1

0

You should not use window globals to pass around your configuration. You should set up a route in Laravel and make an ajax call with your Vue.js application to get your configuration for the specific user.

Something like Axios can help with your ajax calls:

https://github.com/mzabriskie/axios

Laracasts has plenty of Vue.js material including how to work this into Vue.js.

To generate a json response you can use:

https://laravel.com/docs/5.4/responses#json-responses

Stephan-v
  • 19,255
  • 31
  • 115
  • 201
  • Why should I use additional ajax call? My solution: browser loads page and all configuration is ready Your solution: browser loads page, config is not ready -> we can not verify if current user can do something -> we make ajax call which leads to additional delay – Jackson J May 12 '17 at 12:38
  • It is still better than polluting your window global and if you prohibit a user per default from having permissions it should not matter. If you properly set up your application the delay will almost not be visible for users. This is all highly subjective though. You could also use something like this: https://github.com/laracasts/PHP-Vars-To-Js-Transformer and there are a million other ways. The only thing I want to warn you about is not to pollute your global window. – Stephan-v May 12 '17 at 13:07
  • Problem with ajax call is: page is loaded, we need to show/hide some buttons/items on page based on user's permissions(of course, backend handles it too), we call `$store.getters.userCan('something')` to check permission but ajax call is not completed yet so getter returns false. Ajax call returns data, next call to `$store.getters.userCan('something')` should return true, but it is not computed property so nothing happens. – Jackson J May 12 '17 at 13:20
  • You should use Vuex actions for asynchronous mutations. – Stephan-v May 12 '17 at 13:24