Cannot read property 'use' of undefined - VueAuthenticate

[sreecodeslayer]

I came across this error while setting up role management based on the user object from localStorage

I did this in the created hook:

created() {
    console.log(this.$authorize.isAuthorized(['user'], ['create']).then())
}

The same error is thrown by vue-router on the route calls as well.

TypeError: Cannot read property 'use' of undefined
    at VueAuthenticate.bindRequestInterceptor (eval at <anonymous> (app.js:1882), <anonymous>:511:38)
    at new VueAuthenticate (eval at <anonymous> (app.js:1882), <anonymous>:1194:41)
    at VueComponent.get (eval at <anonymous> (app.js:1882), <anonymous>:1408:29)
    at VueComponent.get (eval at <anonymous> (app.js:1924), <anonymous>:30:21)
    at VueComponent.created (eval at 41 (0.d37d24e….hot-update.js:7), <anonymous>:342:22)
    at callHook (eval at <anonymous> (app.js:723), <anonymous>:2557:21)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:723), <anonymous>:4001:5)
    at new VueComponent (eval at <anonymous> (app.js:723), <anonymous>:4170:12)
    at createComponentInstanceForVnode (eval at <anonymous> (app.js:723), <anonymous>:3519:10)
    at init (eval at <anonymous> (app.js:723), <anonymous>:3353:45)

I have not actually written the logic of checking the role from storage object, that shouldn't be an issue yet. So what could possibly be wrong!

Vue.use(VueAuthenticate,{baseUrl: 'http://localhost:8080'})
 
Vue.use(VueAuthorize, {
  roles: {
    admin: {
      handler: function() {
        user = JSON.parse(localStorage.getItem('user'))
        // confirm user role as 'admin'
        console.log("admin role check: ",user)
        return this.$auth.isAuthorized();
      },
      permissions: ['create','read','update','delete']
    },
    user: {
      handler: function() {
        user = JSON.parse(localStorage.getItem('user'))
        // confirm user role as 'user'
        console.log("user role check: ",user)
        return this.$auth.isAuthorized();
      },
      permissions: ['create','read','update','delete']
    }
  },
  permissions: {
    create: function() { return true },
    read: function() { return true },
    update: function() { return true },
    delete: function() { return true }
  }
})

Am i missing something here :thinking: