Fix auth

src/App.vue

@@ -12,6 +12,9 @@ import Footer from "@/components/Utils/Footer"
 export default {
     components: {
         Footer,
+    },
+    beforeUpdate(){
+        this.$store.dispatch("inspectToken")
     }
 }
 </script>

src/components/Dashboards/DashboardList.vue

@@ -47,11 +47,14 @@
             <div class="card-body">
               <h5 class="card-title">
                 {{ dashboard.name }}
-                <span
-                  v-if="dashboard.user == currentUser.id"
-                  class="badge badge-success h6">
-                  owner
-                </span>
+                <div
+                  v-if="currentUser">
+                  <span
+                    v-if="dashboard.user == currentUser.id"
+                    class="badge badge-success h6">
+                    owner
+                  </span>
+                </div>
               </h5>
               <h6 class="card-subtitle">
                 Placeholder Nome Projeto
@@ -64,12 +67,15 @@
                 class="btn btn-blue btn-sm">
                 <span class="fa fa-search"/> Visualizar
               </router-link>
-              <router-link
-                v-if="dashboard.user == currentUser.id"
-                :to="{ name: 'EditDashboard', params: { dashboard: dashboard } }"
-                class="btn btn-sm btn-blue mr-auto">
-                <span class="fa fa-pencil"/> Editar
-              </router-link>
+              <div
+                v-if="currentUser">
+                <router-link
+                  v-if="dashboard.user == currentUser.id"
+                  :to="{ name: 'EditDashboard', params: { dashboard: dashboard } }"
+                  class="btn btn-sm btn-blue mr-auto">
+                  <span class="fa fa-pencil"/> Editar
+                </router-link>
+              </div>
             </div>
           </div>
         </div>
@@ -89,12 +95,9 @@ export default {
     },
     computed: {
         ...mapGetters({ currentUser: "currentUser",
-            dashboards: "getDashboards"
         }),
         filteredDashboards(){
-            return this.dashboards.filter(dashboard =>{
-                return dashboard.name.toLowerCase().includes(this.srchArg.toLowerCase())
-            })
+            return this.$store.getters.getDashboards(this.srchArg)
         }
     },
     beforeCreate(){

src/components/Landing/Navbar.vue

@@ -30,7 +30,7 @@
         <li
           v-if="currentUser"
           class="nav-item" >
-          <a class="nav-link">Olá {{ user.username }}</a>
+          <a class="nav-link">Olá {{ currentUser.username }}</a>
         </li>
         <li class="nav-item">
           <router-link
@@ -73,33 +73,14 @@
 import { mapGetters } from "vuex"
 
 export default {
-    data() {
-        return {
-            user: {
-                username: "",
-                email: "",
-                id: ""
-            }
-        }
-    },
 
     computed: {
         ...mapGetters({ currentUser: "currentUser" })
     },
-    beforeMount () {
-        this.loadUserInfo()
-    },
-
-
     methods: {
         logout () {
             this.$store.dispatch("logout")
             this.$router.replace("/")
-        },
-        loadUserInfo() {
-            this.user.id = this.currentUser.id
-            this.user.username = this.currentUser.name
-            this.user.email = this.currentUser.email
         }
     }
 }

src/components/Users/HomePage.vue

@@ -16,8 +16,6 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex"
-
 
 import Sidebar from "@/components/Utils/Sidebar"
 import Footer from "@/components/Utils/Footer"
@@ -30,47 +28,17 @@ export default {
         "navbar": Navbar,
         "custom-footer": Footer
     },
-    data () {
-        return {
-            projects: [],
-            tags: {
-                name: "",
-                slug: ""
-            },
-            user: {
-                username: "",
-                password: "",
-                email: ""
-            },
-            isModalVisible: false
-        }
-    },
-
-    computed: {
-        ...mapGetters({
-            currentUser: "currentUser",
-            getProjects: "getProjects",
-
-        })
-    },
     beforeMount () {
-        this.loadUserInfo()
         this.loadUsers()
         this.loadProjects()
     },
     methods: {
-        deleteProject () {
-            this.$http.delete("project/" + this.projeto.id + "/",
-                { headers: { "Authorization": "JWT " + localStorage.token } })
-            window.alert("projeto deletado")
-        },
         loadProjects () {
             this.$store.dispatch("loadProjects")
         },
         loadUsers () {
             this.$store.dispatch("loadUsers")
         },
-
         filterByTag () {
             this.$http.get("projects/" + "?tags__name=&tag_name=" + this.tags.name,
                 { headers: { "content-type": "application/json" } }).then(result => {
@@ -80,13 +48,6 @@ export default {
                 error.log(error)
             })
         },
-
-        loadUserInfo () {
-            this.user.id = this.currentUser.id
-            this.user.username = this.currentUser.name
-            this.user.email = this.currentUser.email
-        },
-
         Logout () {
             this.$store.dispatch("logout")
         },

src/components/Utils/Sidebar.vue

@@ -14,7 +14,7 @@
         v-else>
         <h6 class="text-left">
           <span class="fa fa-user"/>
-          {{ (user.username == '') ? 'username' : user.username }}
+          {{ (currentUser.name == '') ? 'username' : currentUser.name }}
         </h6>
         <h6>
           <small>
@@ -63,7 +63,7 @@
         Meus Dashboards
       </router-link>
       <router-link
-        :to="{ name: 'DashboardList' }"
+        :to="{ name: 'DashboardsList' }"
         class="list-group-item">
         Procurar Dashboards
       </router-link>
@@ -114,32 +114,18 @@ export default {
     data() {
         return {
             search: "",
-            user: {
-                username: "",
-                id: "",
-                email: ""
-            }
         }
     },
 
     computed: {
         ...mapGetters({ currentUser: "currentUser" })
     },
-
-    beforeMount () {
-        this.loadUserInfo ()
-    },
     methods: {
 
         logout () {
             this.$store.dispatch("logout") //trigger da ação de login implementado em store/auth.js
             this.$router.replace("/")
         },
-        loadUserInfo() {
-            this.user.id = this.currentUser.id
-            this.user.username = this.currentUser.name
-            this.user.email = this.currentUser.email
-        }
     }
 }
 </script>

src/router/index.js

@@ -56,7 +56,6 @@ export default new Router({
             path: "/home",
             name: "HomePage",
             component: HomePage,
-            beforeEnter: Guard.auth,
             children: [
                 {
                     path: "/user/edit",
@@ -75,7 +74,6 @@ export default new Router({
                     path: "/projects",
                     name: "ProjectsList",
                     component: ProjectsList,
-                    beforeEnter: Guard.auth
                 },
                 {
                     path: "/my-projects",
@@ -87,7 +85,7 @@ export default new Router({
                     path: "/projects/detail/:id",
                     name: "ProjectDetail",
                     component: ProjectDetail,
-                    // beforeEnter: Guard.guest
+                    beforeEnter: Guard.guest
                 },
                 {
                     path: "/projects/edit/:id",
@@ -111,15 +109,12 @@ export default new Router({
                 {
                     path: "/dashboards",
                     name: "DashboardsList",
-                    // TODO: fix this
-                    component: DashboardDetail,
-                    // beforeEnter: Guard.guest
+                    component: DashboardList,
                 },
                 {
                     path: "/dashboards/detail/:id",
                     name: "DashboardDetail",
                     component: DashboardDetail,
-                    // beforeEnter: Guard.guest
                 },
                 {
                     path: "/dashboards/new",
@@ -151,11 +146,13 @@ export default new Router({
                     path: "/query",
                     name: "QueryComponent",
                     component: QueryComponent,
+                    beforeEnter: Guard.auth
                 },
                 {
                     path: "/question",
                     name: "AskQuestion",
                     component: AskQuestion,
+                    beforeEnter: Guard.auth,
                     props: true
                 },
                 // {
@@ -168,6 +165,7 @@ export default new Router({
                     path: "/import",
                     name: "ContainerImport",
                     component: ContainerImport,
+                    beforeEnter: Guard.auth,
                     props: true
                 },
                 // {

src/store/Authentication/auth.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import User from './User.js'
 import Vue from 'vue'
+import JwtDecode from 'jwt-decode'
 
 const LOGIN = 'LOGIN'
 const LOGOUT = 'LOGOUT'
@@ -55,24 +56,24 @@ const actions = {
             resolve()
         },
           error => {
-              console.log(error.data)
               reject("Usuário e senha não existem no nosso banco de dados")
           })
       })
     },
     logout ({ commit }, user ) {
         return new Promise((resolve, reject) => {
-            Vue.http.post("rest-auth/logout/", user, { headers: { "content-type": "application/json" } }).then(response => {
+            Vue.http.get("rest-auth/logout/", { headers: { "content-type": "application/json", "Authorization": "JWT " + localStorage.token } }).then(response => {
                 commit(LOGOUT)
                 delete localStorage.token
                 resolve ()
             },
             error => {
-
+                commit(LOGOUT)
+                delete localStorage.token
                 reject ()
             })
         })
-  },
+    },
     register ({ commit }, user){
       return new Promise((resolve, reject) => {
           Vue.http.post("users/", user, { headers: { "content-type": "application/json" } }).then(response => {
@@ -83,21 +84,52 @@ const actions = {
               reject(error)
           })
       })
-  },
+    },
     update ({ commit }) {
         commit(UPDATE)
-  },
-
+    },
     loadUsers({ commit }) {
         return new Promise((resolve, reject) => {
             Vue.http.get("users/", { headers: { "content-type": "application/json" } }).then(response => {
                 commit(SET_USERS, response.data)
                 resolve()
             },
-                error => {
-                    reject()
-                })
+            error => {
+                reject()
+            })
         })
+    },
+    refreshToken({ commit }) {
+        const payload = {
+            token: localStorage.token
+        }
+
+        Vue.http.post("refresh-token/", payload)
+            .then((response) => {
+                localStorage.token = response.data.token
+                commit(UPDATE)
+            })
+            .catch((error) => {
+                this.dispatch("logout")
+            })
+    },
+    inspectToken({ commit }) {
+        const token = localStorage.token;
+        if (token) {
+            const decoded = JwtDecode(token);
+            const exp = decoded.exp
+            const orig_iat = decoded.orig_iat
+
+            // const lifespan = 1800  token lifespan remaining to update = lifespan - desired time to update
+            const expiring = 900 // time frame desired to prompt token to udpate( 15 mins)
+
+            if (exp - (Date.now() / 1000) < expiring ) { //
+                this.dispatch("refreshToken")
+            }else if(exp - (Date.now() / 1000) < 0) {
+                this.dispatch("logout")
+                // Prompt user to relogin
+            }
+        }
     }
 
 }