How to use all functions vue-auth without using its login function

Question

Im new to VueJS and trying to build authorization functions for my website. First I attempt to use library name Vue-auth to handle authorization. It works fine, here is my code:

Login.vue

    login () {
      var redirect = this.$auth.redirect()
      this.$auth.login({
        headers: {
          'Content-Type': 'application/json'
        },
        data: this.data.body,
        rememberMe: this.data.rememberMe,
        redirect: {name: redirect ? redirect.from.name : 'Home'},
        success (res) {
          console.log('Auth Success')
        },
        error (err) {      
          console.log(err)
        }

navbar ():

<div class="nav-right is-flex">
     <router-link v-if="!$auth.check()" to="/login" class="nav-item">Login</router-link>
     <a v-if="$auth.check()" @click="logout" class="nav-item">Logout</a>
</div>

In router, to restrict access, I use auth property. Something like:

{
    path: '/users',
    name: 'users',
    component: require('./components/pages/Users.vue'),
    meta: {auth: ['admin']}
}, 
{
    path: '/users',
    name: 'users',
    component: require('./components/pages/Users.vue'),
    meta: true
}

And in app.js:

Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
    },
    response: function (res) {
      // Get Token from response body
      return res.data
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'http://localhost:6789/login', fetchUser: false },
  refreshData: { enabled: false }
})

But now I want to write a service to call axios to API Url myself, not using $auth.login function anymore. I changed my

login () {
  var self = this;
  _AuthenticationService
    .login(this.data.body)
    .then(response => {
      self.info = response;
      console.log(response);
    })
    .catch(err => {
      self.info = err;
    });

My service:

import axiosconfigurator from '../axiosconfigurator'

class AuthenticationService {
  login (request) {
    var self = this
    return new Promise((resolve, reject) => {
      axios.post('https://reqres.in/api/login', {
        username: 'Fred',
        password: '123'
      })
        .then(function (response) {
          // get token from this response
          var token = response.data.token
          self._setAuthToken(token, true)
          console.log(token)

          // var data = core.Parsers.UserParser.parse(response);
          // history.update(data);
          // deferred.resolve(history);
        })
        .catch(function (error) {
          console.log(error)
          reject(error)
        });
    })
  }

So my question is: I dont want to use the vue-auth library login function anymore, but I still want use its advantages like $auth.ready function, or auth property in router and $auth.user. How can I achieve it?

Answer 1

Based on the date of your question and the fact that the library was changed lately You can call the login method on the vue-auth object passing the following option

makeRequest:false

You have a solution described there https://github.com/websanova/vue-auth/issues/256

this.$auth.watch.authenticated = true
this.$auth.watch.loaded = true      
this.$user(response.user)
this.$router.push('/dashboard')

I tested it and it was not working so I open a ticket https://github.com/websanova/vue-auth/issues/563