axios and vue-authentication

components_auth_Login.vue

<template>
  <section>
    <div class="container">

      <form v-on:submit.prevent="login()">
        <div class="field">
          <p class="control has-icons-left">
            <input v-model="data.body.email" type="email" placeholder="Email" required class="input" />
            <span class="icon is-small is-left">
              <i class="mdi mdi-email"></i>
            </span>
          </p>
        </div>
        <div class="field">
          <p class="control has-icons-left">
            <input v-model="data.body.password" type="password" placeholder="Password" required class="input" />
            <span class="icon is-small is-left">
              <i class="mdi mdi-lock"></i>
            </span>
          </p>
        </div>
        <label><input v-model="data.rememberMe" type="checkbox" /> Remember Me</label>
        <div class="field">
          <p class="control">
            <button type="submit" class="button is-success">
              Login
            </button>
          </p>
        </div>
      </form>

      <hr/>
      <button class="button is-success" v-on:click="test()">
        test
      </button>
      <button class="button">
        logout
      </button>
      <p>Don't have an account yet? <a href="#">Sign up</a></p>
      <p><a href="#">Forgot your password?</a></p>

    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      data: {
        body: {
          email: '',
          password: '',
        },
        rememberMe: false,
      },
      error: null,
    };
  },
  methods: {
    login() {
      this.$store.dispatch('login', {
        user: {
          email: this.data.body.email,
          password: this.data.body.password,
        },
      }).then(() => {
        this.$router.push('home');
      });
    },

    // authenticate(provider) {
    //   this.$store.dispatch('authenticate', { provider }).then(() => {
    //     this.$router.push('home');
    //   });
    // },

    test() {
      console.log(this.$auth);
      this.$http.get('http://localhost:8000/api/v1/auth/user/').then((response) => {
        // get body data
        console.log(response.body);
      }, (response) => {
        console.log(response);
        // error callback
      });
    },
  },
};
</script>

<style lang="scss">

</style>

services_auth.js

import Vue from 'vue';
// import VueResource from 'vue-resource';
import axios from 'axios';
import VueAxios from 'vue-axios';
import { VueAuthenticate } from 'vue-authenticate';
// import config from '../config.json'

// Vue.use(VueResource);
Vue.use(VueAxios, axios);

const vueAuthInstance = new VueAuthenticate(Vue.http, {
  // Interceptors for using with axios
  bindRequestInterceptor: () => {
    this.$http.interceptors.request.use((config) => {
      const c = config;
      if (this.isAuthenticated()) {
        c.headers.Authorization = [
          this.options.tokenType, this.getToken(),
        ].join(' ');
      } else {
        delete c.headers.Authorization;
      }
      return c;
    });
  },
  bindResponseInterceptor: () => {
    this.$http.interceptors.response.use((response) => {
      this.setToken(response);
      return response;
    });
  },
});

export default vueAuthInstance;

store_auth.js

import vueAuthInstance from '../services/auth';

export default {
  state: {
    profile: null,
    isAuthenticated: vueAuthInstance.isAuthenticated(),
  },

  mutations: {
    isAuthenticated(state, payload) {
      const s = state;
      s.isAuthenticated = payload.isAuthenticated;
    },

    setProfile(state, payload) {
      const s = state;
      s.profile = payload.profile;
    },
  },

  actions: {
    login(context, payload) {
      const p = payload || {};
      return vueAuthInstance.login(p.user, p.requestOptions).then(() => {
        context.commit('isAuthenticated', {
          isAuthenticated: vueAuthInstance.isAuthenticated(),
        });
      });
    },

    register(context, payload) {
      const p = payload || {};
      return vueAuthInstance.register(p.user, p.requestOptions).then(() => {
        context.commit('isAuthenticated', {
          isAuthenticated: vueAuthInstance.isAuthenticated(),
        });
      });
    },

    logout(context, payload) {
      const p = payload || {};
      return vueAuthInstance.logout(p.requestOptions).then(() => {
        context.commit('isAuthenticated', {
          isAuthenticated: vueAuthInstance.isAuthenticated(),
        });
      });
    },

    authenticate(context, payload) {
      const p = payload || {};
      return vueAuthInstance.authenticate(p.provider, p.userData, p.requestOptions).then(() => {
        context.commit('isAuthenticated', {
          isAuthenticated: vueAuthInstance.isAuthenticated(),
        });
      });
    },
  },
};