Logging in and saving token

src/App.vue

@@ -21,6 +21,16 @@ export default {
     NavBar,
     FooterSection,
   },
+  // created() {
+  //   this.$http.interceptors.response.use(undefined, (err) => {
+  //     return new Promise(function(resolve, reject) {
+  //       if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
+  //         this.$store.dispatch(logout);
+  //       }
+  //       throw err;
+  //     });
+  //   });
+  // },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);

src/assets/Log.js

@@ -0,0 +1,9 @@
+const items = {
+  isLoggedIn() {
+    return localStorage.getItem('token') !== undefined;
+  },
+  getUser() {
+    return localStorage.getItem('User');
+  },
+};
+export default items;

src/components/shared/navBar.vue

@@ -194,7 +194,7 @@
             >Login</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
-              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Logout</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/logout')">Logout</a>
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
               <a
                 class="dropdown-item cursor-pointer"
@@ -217,8 +217,14 @@
   </nav>
 </template>
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
+  computed: {},
+
   methods: {
+    ...mapGetters('authentication', ['isLoggedIn']),
+
     routerGoTo(goTo) {
       console.log(goTo);
       this.$emit('routerGoTo', goTo);

src/components/user/logOut.vue

@@ -0,0 +1,19 @@
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  computed: {
+    isLoggedIn() {
+      return this.$store.getters.isLoggedIn;
+    },
+  },
+  methods: {
+    ...mapActions('authentication', ['logout']),
+    Logout() {
+      this.logout('logout').then(() => {
+        this.$router.push('/users/login');
+      });
+    },
+  },
+};
+</script>

src/components/user/loginPage.vue

@@ -6,6 +6,7 @@
         <div class="form">
           <div>
             <h4>Login</h4>
+            <br />
           </div>
           <div class="row">
             <div class="col-md-11" style="margin-bottom: 1em">
@@ -19,6 +20,7 @@
                     type="text"
                     name="username"
                     placeholder="Username"
+                    v-model="username"
                     value
                   />
                 </div>
@@ -82,7 +84,9 @@
 </template>
 
 <script>
-const axios = require('axios');
+import { mapActions, mapState } from 'vuex';
+// import axios from 'axios';
+// import User from '../../assets/Log';
 
 export default {
   name: 'Login',
@@ -98,18 +102,19 @@ export default {
       text: '',
       showPassword: false,
       password: '',
+      email: '',
     };
   },
+  computed: {
+    ...mapState('authentication', ['token', 'status']),
+  },
   methods: {
+    ...mapActions('authentication', ['login']),
     Login() {
-      axios
-        .post('/api/register/authenticate', {
-          username: this.username,
-          password: this.password,
-        })
-        .then(response => console.log(response.data))
-        .catch(error => console.log(error.push));
-      this.$router.push('/');
+      this.login({ username: this.username, password: this.password })
+        .then(() => this.router.push('/'))
+        .catch(err => console.log(err));
+      this.$router.push('/about/us');
     },
     togglePassword() {
       this.showPassword = true;

src/components/user/secure.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>This page is protected by auth</h1>
+  </div>
+</template>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import EvaIcons from 'vue-eva-icons';
+import axios from 'axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -8,6 +9,24 @@ Vue.use(EvaIcons);
 
 Vue.config.productionTip = false;
 
+Vue.prototype.$http = axios;
+const token = localStorage.getItem('token');
+if (token) {
+  Vue.prototype.$http.defaults.headers.common.Authorization = token;
+}
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (store.getters.isLoggedIn) {
+      next();
+      return;
+    }
+    next('/users/login');
+  } else {
+    next();
+  }
+});
+
 Vue.filter('toCurrency', (value) => {
   if (typeof value !== 'number') {
     return value;

src/router/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/prefer-default-export */
 import Vue from 'vue';
 import Router from 'vue-router';
 
@@ -39,6 +40,7 @@ import PrivacyPolicy from '../components/misc/privacyPolicyPage.vue';
 
 import MakeOffer from '../components/processFlow/makeOffer.vue';
 import Offer from '../components/processFlow/offers.vue';
+// import store from '../store';
 
 Vue.use(Router);
 

src/store/index.js

@@ -16,6 +16,7 @@ import PropertyTypes from './modules/property/propertyTypes';
 import Register from './modules/user/register';
 import WeekList from './modules/timeshare/weekList';
 import Bid from './modules/processFlow/bid';
+import Authentication from './modules/user/authentication';
 
 Vue.use(Vuex);
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -37,5 +38,6 @@ export default new Vuex.Store({
     registerAgency: Register,
     weekList: WeekList,
     bid: Bid,
+    authentication: Authentication,
   },
 });

src/store/modules/user/authentication.js

@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+
+Vue.use(Vuex);
+export default {
+  namespaced: true,
+  state: {
+    status: '123',
+    token: localStorage.getItem('token') || '',
+    user: {},
+  },
+  mutations: {
+    auth_request(state) {
+      state.status = 'loading';
+    },
+    auth_success(state, token, user) {
+      state.status = 'success';
+      state.token = token;
+      state.user = user;
+    },
+    auth_error(state) {
+      state.status = 'error';
+    },
+    logout(state) {
+      state.status = '';
+      state.token = '';
+    },
+  },
+  getters: {
+    isLoggenIn: state => !!state.token,
+    authStatus: state => state.status,
+  },
+  actions: {
+    login({
+      commit,
+    }, user) {
+      return new Promise((reject) => {
+        commit('auth_request');
+        axios({
+          url: '/api/register/authenticate',
+          data: user,
+          method: 'POST',
+        })
+          .then((resp) => {
+            console.log(resp.data);
+            localStorage.setItem('token', resp.data.token);
+            commit('auth_success', resp.data.token, resp.data);
+          })
+          .catch((err) => {
+            commit('auth_error');
+            localStorage.removeItem('token');
+            reject(err);
+          });
+      });
+    },
+    logout({
+      commit,
+    }) {
+      return new Promise(() => {
+        commit('logout');
+        console.log('What');
+        localStorage.removeItem('token');
+        delete axios.defaults.headers.common.Authorization;
+      });
+    },
+  },
+};