Client side authorization when retrieving from server I have an endpoint to retrieve the user's authorization based on Joseph Silber's Bouncer.
I have a global can() function. It creates a unique key based on the authorization request and sets an object's property based on that key.
can (ability, model = null, id = null) {
  const key = `${ability}_${model}_${id}`
  const params = {
    ability, model, id
  }

  axios.get(this.route('authorize', params))
    .then(res =&gt; {
      Vue.set(this.userAuthorizations, key, res.data.allowed)
    })
    .catch(err =&gt; this.showError(err.message))

  return key
}

data () {
  return {
    userAuthorizations: {}
  }
}

So in a template, I do something like...
&lt;button v-if=&quot;userAuthorizations[can('create', 'users')]&quot;&gt;
  Create User
&lt;/button&gt;

There will be a delay while it's retrieving the result, but since the key doesn't exist it won't show a restricted thing.
It looks ugly to me, but it's the most sustainable and reusable way I could think to do it on the front-end. Thoughts? What's a better way?
Bearing in mind that it is a ecmascript-8 feature, instead of waiting for the promise to be fulfilled with a callback:

axios.get(this.route('authorize', params))
   .then(res =&gt; {
     Vue.set(this.userAuthorizations, key, res.data.allowed)
   })
   .catch(err =&gt; this.showError(err.message))


the code could wait until the response is retrieved using await:
async can (ability, model = null, id = null) {
  const key = `${ability}_${model}_${id}`
  const params = {
    ability, model, id
  }

  const response = await axios.get(this.route('authorize', params))
    .catch(err =&gt; this.showError(err.message))

  Vue.set(this.userAuthorizations, key, res.data.allowed)
  return res.data.allowed
}  

Note that can() needs to be declared as async in order for await to be permitted inside of it.