fearture: implement navigation guards, store mutations, store actions

Author: enricodeleo

auth/credits.md

@@ -1,4 +1,3 @@
 # Credits
 
-* Background Created by Quinky - Freepik.com https://www.freepik.com/free-photos-vectors/background
 * UI by Enrico Deleo https://enricodeleo.com

auth/package-lock.json

@@ -44,6 +44,7 @@ export default {
     padding: 0;
     margin: 0;
     background-color: #f8f9f9;
+    overflow-x: hidden;
   }
 
   body {
@@ -83,5 +84,4 @@ export default {
   .header-main {
     margin-bottom: 20px;
   }
-
 </style>

auth/src/App.vue

@@ -1,32 +1,13 @@
 // main.js
 import Vue from 'vue';
-import App from './App.vue';
-import VueRouter from 'vue-router';
-
-import { store } from './store';
-import IndexPage from './pages/Index';
-import LoginPage from './pages/Login';
-
-const router = new VueRouter({
-  routes: [
-    {
-      path: '/',
-      name: 'index',
-      component: IndexPage,
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: LoginPage,
-    },
-  ]
-});
 
-Vue.use(VueRouter);
+import App from './App.vue';
+import router from './router';
+import store from './store';
 
 new Vue({
   el: '#app',
   render: h => h(App),
   router,
   store,
-});
+});

auth/src/main.js

@@ -1,7 +1,7 @@
 // Index.vue
 <template>
   <div class="container">
-    <img src="https://images.pexels.com/photos/1759406/pexels-photo-1759406.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
+    Pagina profilo
   </div>
 </template>
 

auth/src/pages/Index.vue

@@ -5,18 +5,46 @@ Vue.use(Vuex);
 
 const user = {
   state: {
+    id: null,
+    registeredAt: null,
+    avatar: null,
+    name: null,
     email: null,
-    password: null,
+    accessToken: null,
   },
-  mutations: {},
-  actions: {},
-  getters: {}
-}
+  mutations: {
+    updateUser: (state, data) => {
+      state = data;
+    },
+    logout: (state) => {
+      state.accessToken = null;
+    },
+  },
+  actions: {
+    async doLogin({ commit }, loginData) {
+      const rawResponse = await fetch('https://5dfd619831f32a0014c82843.mockapi.io/login', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(loginData),
+      });
+      const response = await rawResponse.json();
+      commit('updateUser', response);
+    },
+
+    doLogout({ commit }) {
+      commit('logout');
+    }
+  },
+  getters: {},
+};
 
 const store = new Vuex.Store({
   modules: {
     user,
-  }
-})
+  },
+});
 
-export { store }
+export default store;