Vue 3 rolesKey option not supporting dot notation

[fabianlugones]

When defining a rolesKey with dot notation in the options it throws the following error:

The setted user role name structure is the following:

user.role.name

My plugin definition :

import { createAuth } from '@websanova/vue-auth/src/v3.js'
import driverAuthBearer from './driverOAuthBearer'
import driverHttpAxios from '@websanova/vue-auth/src/drivers/http/axios.1.x.js'
import driverRouterVueRouter from '@websanova/vue-auth/src/drivers/router/vue-router.2.x.js'

import authService from '../services/users.service'

export default (app) => {
  app.use(
    createAuth({
      plugins: {
        http: app.axios,
        router: app.router
      },
      drivers: {
        http: driverHttpAxios,
        auth: driverAuthBearer,
        router: driverRouterVueRouter
      },
      options: {
        stores: ['storage', 'cookie'],
        tokenDefaultKey: 'auth_access_token',
        rolesKey: 'role.name',
        loginData: {
          url: 'oauth/token',
          method: 'POST',
          redirect: '/',
          fetchUser: true,
          staySignedIn: true,
          tokenName: 'access_token',
          data: {
            grant_type: 'password',
            client_id: process.env.VUE_APP_PASSPORT_CLIENT_ID,
            client_secret: process.env.VUE_APP_PASSPORT_CLIENT_SECRET,
            scope: ''
          }
        },
        refreshData: {
          url: 'oauth/token',
          method: 'POST',
          enabled: false,
          interval: process.env.MIX_PASSPORT_ACCESS_TOKEN_EXPIRES_IN || 30,
          tokenName: 'refresh_token',
          data: {
            grant_type: 'refresh_token',
            client_id: process.env.MIX_PASSPORT_CLIENT_ID,
            client_secret: process.env.MIX_PASSPORT_CLIENT_SECRET,
            scope: ''
          }
        },
        registerData: {
          url: 'auth/register',
          method: 'POST',
          redirect: '/ingresar',
          autoLogin: false
        },
        fetchData: {
          url: 'api/user',
          method: 'GET',
          enabled: true
        },
        logoutData: {
          redirect: '/ingresar'
          // success () {
          //   this.token(this.options.refreshData.tokenName, null)
          // }
        },
        forbiddenRedirect: {
          path: '/login'
        },
        parseUserData: (response) => {
          return authService.parseUserData(response)
        }
      }
    })
  )
}

I'm currently using Vue 3.

Thanks in advance!

[Rob Nova]

Not really anything to do with Vue 3 there, it's just parsing a dot string internally and trying to map it to the user object that's passed in.

Hard to know without seeing what the response structure for the user looks like, do you have a sample?

[fabianlugones]

I found that the user structure was altered by parseUserData option. Works ok now. Sorry, my bad. Thanks for this package 🚀

[Rob Nova]

Glad it worked out :-)