REST login/logout is working

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import store from 'vuejs/store'
-import VLogin from 'vuejs/components/Login'
+import VUserBlock from 'vuejs/components/User/UserBlock'
 
 // require('theme/assets/styles/main.scss');
 import 'theme/assets/styles/main.scss'
 
 (function(Drupal, drupalSettings) {
 
-  var v_login = new Vue({
+  var v_user_block = new Vue({
     store,
-    render: h => h(VLogin)
+    render: h => h(VUserBlock)
   }).$mount('#block-userlogin')
 
 

web/themes/custom/materiotheme/vuejs/components/Login.vue → web/themes/custom/materiotheme/vuejs/components/User/Login.vue

@@ -8,7 +8,8 @@
         type="text"
         placeholder="Email" name="name"
         v-model="mail"
-        @keyup.enter="login"/>
+        @keyup.enter="login"
+      />
       <input
         id="edit-pass"
         class="form-text"
@@ -41,12 +42,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['User']),
-    // ...mapState({
-    //   isloggedin: state => state.user.isloggedin,
-    //   username: state => state.user.username,
-    //   token: state => state.user.token
-    // })
+    ...mapState(['User'])
   },
   methods: {
     ...mapActions({

web/themes/custom/materiotheme/vuejs/components/User/UserBlock.vue

@@ -0,0 +1,31 @@
+<template lang="html">
+  <UserTools v-if="token" />
+  <Login v-else />
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import Login from 'vuejs/components/User/Login'
+import UserTools from 'vuejs/components/User/UserTools'
+
+export default {
+  // data () {
+  //   return {}
+  // },
+  computed: {
+    ...mapState({
+      token: state => state.User.token
+    })
+  },
+  components: {
+    Login,
+    UserTools
+  }
+}
+
+</script>
+
+<style lang="css" scoped>
+
+</style>

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -0,0 +1,38 @@
+<template lang="html">
+  <div id="user-tools">
+    <h4>{{ mail }}</h4>
+    <a href="/user/logout"
+      @click.prevent="onLogout()"
+    >
+      logout
+    </a>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  // data () {
+  //   return {
+  //     mail: "Hello User!"
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      mail: state => state.User.mail
+    })
+  },
+  methods: {
+    ...mapActions({
+      userLogout: 'User/userLogout'
+    }),
+    onLogout () {
+      this.userLogout()
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/rest/http-axios.js

@@ -1,10 +1,13 @@
 import axios from 'axios'
 
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
 // console.log('drupalSettings', drupalSettings);
 
 export const HTTP = axios.create({
   baseURL: `http://dev.materio.com`,
   headers: {
-    Authorization: 'Bearer {token}'
+    Authorization: 'Bearer {token}',
+    "Content-Type": "application/json"
   }
 })

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -1,13 +1,17 @@
 import { HTTP } from 'vuejs/rest/http-axios'
+import qs from 'querystring'
 
 export default {
   namespaced: true,
 
   // initial state
   state : {
-    isloggedin: false,
-    username: '',
-    token: null
+    uid:null,
+    // username: '',
+    mail:'',
+    token: null,
+    logout_token: null
+    // isloggedin: false
   },
 
   // getters
@@ -15,45 +19,48 @@ export default {
 
   // mutations
   mutations : {
-    // setUser (state, posts) {
-    //   state.all = posts
-    // }
-    // setOpened (state, post) {
-    //   state.opened = post
-    // },
-    // clearOpened (state) {
-    //   state.opened = null
-    // }
+    setUser (state, data) {
+      state.uid = data.current_user.uid
+      // state.username = data.username
+      state.mail = data.current_user.mail
+      state.token = data.csrf_token
+      state.logout_token = data.logout_token
+    },
+    setLoggedOut (state) {
+      state.uid= null
+      state.mail = ''
+      state.token = null
+      state.logout_token = null
+    }
   },
 
   // actions
   actions : {
-    getToken ({ commit, state }, data) {
-      // console.log('getToken data', data)
-
-      let config = {
-        headers: {
-          "Content-Type": "application/json"
-        }
-      }
-
-      // console.log('data', data)
-      // console.log('config', config)
-
-      HTTP.post('/user/login?_format=json', data, config)
-        .then(response => {
-          console.log('response', response)
-          // cb(response.data)
+    getToken ({ commit, state }, credentials) {
+      HTTP.post('/user/login?_format=json', credentials)
+        .then(({ data }) => {
+          console.log('data', data)
+          commit('setUser', data)
+        })
+        .catch(( error ) => {
+            console.log('Issue with login', error)
+            Promise.reject(error)
+        })
+    },
+    userLogout ({ commit, state }) {
+      let credentials = qs.stringify({
+        token: state.token
+      })
+      HTTP.post('/user/logout', credentials)
+        .then((resp) => {
+          console.log('resp', resp)
+          commit('setLoggedOut')
         })
-        .catch(({ error }) => {
-            console.log('Issue with login', error);
-            Promise.reject(error);
+        .catch(( error ) => {
+            console.log('Issue with logout', error)
+            Promise.reject(error)
         })
     }
-    // ,
-    // logout ({ commit }) {
-    //
-    // }
   }
 
 }