Question ! Using with Nuxt

[muscle-rhnkyr]

@williamcruzme thanks for super cool lib. I wonder where should I put

const { data: permissions } = await axios.get('/api/permissions');
const { data: roles } = await axios.get('/api/roles');

this.$laravel.setPermissions(permissions);
this.$laravel.setRoles(roles);

while working with Nuxt?

Thanks in advance.

[williamcruzme]

@muscle-rhnkyr Thank you very much for your comment!

These days I will work on the support for Nuxt.js. I'll keep you informed right here.

Greetings.

[williamcruzme]

@muscle-rhnkyr I have published a new version 1.3.0 that includes support with Nuxt.js perfectly.

In the README.md you can find the instructions for the installation 🍻

This code should be put once you log in to get your permissions and roles. So when they are redirected you would only show the desired content.

// Login
// ...

const { data: permissions } = await axios.get('/api/permissions');
const { data: roles } = await axios.get('/api/roles');

this.$laravel.setPermissions(permissions);
this.$laravel.setRoles(roles);

Do not forget to create the endpoints!

[muscle-rhnkyr]

@williamcruzme thanks for this! Now my question is when I set it up as you explain it and use with nuxt auth module

async login() {
        this.$nuxt.$loading.start()
        this.loading = false
        try {
          await this.$auth.loginWith('local', {
            data: {
              email: this.email,
              password: this.password,
            },
          }).then(async () => {
            const { data: permissions } = await this.$axios.get('/api/permissions')
            const { data: roles } = await this.$axios.get('/api/roles')

            await this.$laravel.setPermissions(permissions)
            await this.$laravel.setRoles(roles)
          })
        } catch (e) {
          this.$nuxt.$loading.finish()
          this.loading = true
          this.error = e.response
        }
      },

the think is when I use somewhere in another partial * template it seems it does not work. When I try console.log(this.$laravel.getRoles())in that template's mounted method returns empty array. I am sure end point returns data.

• left-menu.vue

`

< script >

export default {

mounted () {
  console.log(this.$laravel.getRoles())
},

computed: {

  role() {
    return this.$auth.user.role
  },
},

} < /script >`

[williamcruzme]

@muscle-rhnkyr Permissions and roles are lost when you refresh the website. Is your website SPA or MPA?

[muscle-rhnkyr]

It is SPA.

[williamcruzme]

Thank you for your patience. I have published a new release (1.4.0) that has the option to persist the permissions and roles that you establish.

Greetings.

[muscle-rhnkyr]

Hey @williamcruzme . Thank you for that!!! Now works like a charm. Cheers.

[elsopi]

@williamcruzme thanks a lot for this library. Was facing the same issue, but it's fine now.

[williamcruzme]

@elsopi Thanks for your feedback!

[elsopi]

@williamcruzme for some reason, my app is no longer running properly and it started after adding persistence property. This is the error message i get

VM3497:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at Object.install (vendors.app.js:56617) at Function.Vue.use (commons.app.js:16578) at Module../plugins/libs.js (app.js:11830) at __webpack_require__ (runtime.js:791) at fn (runtime.js:151) at Module../.nuxt/index.js (app.js:3773) at __webpack_require__ (runtime.js:791) at fn (runtime.js:151) at Module.<anonymous> (app.js:1969)

[williamcruzme]

@elsopi Make sure that at the moment you use the setPermissions and setRoles functions, the parameter value is not undefined.

[gladtoseeuhappy]

Thank you for your patience. I have published a new release (1.4.0) that has the option to persist the permissions and roles that you establish.

Greetings.

I already set option to persist but my side bar not work at all, except reload page

Vue.use(LaravelPermissions, { persistent: true });