vouill

<template>
 <div>
   <form class="login" @submit.prevent="login">
     <h1>Sign in</h1>
     <label>User name</label>
     <input required v-model="username" type="text" placeholder="Snoopy"/>
     <label>Password</label>
     <input required v-model="password" type="password" placeholder="Password"/>
     <hr/>
     <button type="submit">Login</button>

vouill

...
methods: {
 login: function () {
   const { username, password } = this
   this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
     this.$router.push('/')
   })
 }
}
...

vouill

const state = {
  token: localStorage.getItem('user-token') || ''
  status: '',
}

vouill

const getters = {
  isAuthenticated: state => !!state.token,
  authStatus: state => state.status,
}

vouill

const actions = {
  [AUTH_REQUEST]: ({commit, dispatch}, user) => {
    return new Promise((resolve, reject) => { // The Promise used for router redirect in login
      commit(AUTH_REQUEST)
      axios({url: 'auth', data: user, method: 'POST' })
        .then(resp => {
          const token = resp.data.token
          localStorage.setItem('user-token', token) // store the token in localstorage
          commit(AUTH_SUCCESS, token)
          // you have your token, now log in your user :)

vouill

// basic mutations, showing loading, success, error to reflect the api call status and the token when loaded

const mutations = {
  [AUTH_REQUEST]: (state) => {
    state.status = 'loading'
  },
  [AUTH_SUCCESS]: (state, token) => {
    state.status = 'success'
    state.token = token
  },

vouill

const actions = {

...

  [AUTH_LOGOUT]: ({commit, dispatch}) => {
    return new Promise((resolve, reject) => {
      commit(AUTH_LOGOUT)
      localStorage.removeItem('user-token') // clear your user's token from localstorage
      resolve()
    })

vouill

methods: {
  logout: function () {
    this.$store.dispatch(AUTH_LOGOUT)
    .then(() => {
      this.$router.push('/login')
    })
  }
},

vouill

const actions = {
    [AUTH_REQUEST]: ({commit, dispatch}, user) => {
        return new Promise((resolve, reject) => {
            commit(AUTH_REQUEST)
            axios({url: 'auth', data: user, method: 'POST' })
            .then(resp => {
                const token = resp.data.token
                localStorage.setItem('user-token', token)
                // Add the following line:
                axios.defaults.headers.common['Authorization'] = token

vouill

import store from '../store' // your vuex store 

const ifNotAuthenticated = (to, from, next) => {
  if (!store.getters.isAuthenticated) {
    next()
    return
  }
  next('/')
}