vue-authenticate files

LoginPage.vue

<i18n>
{
  "pl":{
    "email": "Adres email",
    "password": "Hasło",
    "send" : "Wyślij",
    "reset": "Resetuj"
  },
  "en":{
    "email": "Email address",
    "password": "Password",
    "send" : "Send",
    "reset": "Reset"
  }
}
</i18n>
<template>
    <div id="login-wrapper">
    <el-row>
        <el-col :span="8" :offset="8">
            <h1>Bileteria</h1>
            <div class="has-error" v-if='errors'>
              Logowanie nie powiodło się
              </div>
            <el-form :model="loginForm">

                <el-form-item>
                  <el-input :placeholder="$t('email')" v-model="loginForm.email" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input :placeholder="$t('password')" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="login()">{{$t('send')}}</el-button>
                  <el-button @click="resetForm('loginForm')">{{$t('reset')}}</el-button>
                </el-form-item>

            </el-form>

        </el-col>
    </el-row>
    </div>
</template>

<script>
import {loginUrl, getHeader, apiDomain} from './../config'
import {grantType, clientId, clientSecret} from './../.env'
import Vue from 'vue'
export default {
  components: {
  },
  data () {
    return {
      loginForm: {
        email: '',
        password: ''
      },
      errors: false
    }
  },
  created () {
    if (this.userIsLoggedIn()) {
      this.$router.push({name: 'dashboard'})
    }
  },
  methods: {
    login () {
      this.errors = false
      const postData = {
        grant_type: grantType,
        client_id: clientId,
        client_secret: clientSecret,
        username: this.loginForm.email,
        password: this.loginForm.password,
        scope: ''
      }

      this.$auth.login(postData).then(function (response) {
        // Execute application logic after successful login
          this.$router.push({name: 'dashboard'})
      })

    },
    userIsLoggedIn () {
      return window.localStorage.getItem('authUser')
    },
    resetForm () {
        this.loginForm = {
            email: '',
            password: ''
        };
    }
  },
  computed: {
    error () {
      console.log(this.errors.body.message)
      this.error = this.errors.body.message
    }
  }
}
</script>

<style lang="css" scoped>
  #login-wrapper {
    height:100%;
    display:flex;
    justify-content: center;
    flex-direction: column;
  }

  h1 {
    color: #000;
    font-family: "Raleway", sans-serif;
    font-weight: 300;
    text-align: center;
  }

  .has-error {
    color:red;
    margin-bottom: 5px;
  }
</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'

Vue.use(Vuex)
Vue.use(VueResource)

const authInstance = VueAuthenticate(Vue, {
  baseUrl: 'http://localhost:8000',
  loginUrl: '/oauth/token'
})


export default new Vuex.Store({

  // You can use it as state property
  state: {
    isAuthenticated: false
  },

  // You can use it as a state getter function (probably the best solution)
  getters: {
    isAuthenticated () {
      return authInstance.isAuthenticated()
    }
  },

  // Mutation for when you use it as state property
  mutations: {
    isAuthenticated (state, payload) {
      state.isAuthenticated = payload.isAuthenticated
    }
  },

  actions: {

    // Perform VueAuthenticate login using Vuex actions
    login (context, payload) {

      authInstance.login(payload.user, payload.requestOptions).then((response) => {
        context.commit('isAuthenticated', {
          isAuthenticated: authInstance.isAuthenticated()
        })
      })

    }
  }
})