Improved checking if the user's session is still valid and redirecting him to the login page if not

frontend/src/App.vue

@@ -1,23 +1,26 @@
 <template>
   <div id="app">
-    <div class="ui secondary menu" v-if="user.authenticated">
-      <router-link to="/home" class="item">Home</router-link>
-      <router-link to="/books" class="item">Books</router-link>
-      <router-link to="/authors" class="item">Authors</router-link>
-      <router-link to="/publishers" class="item">Publishers</router-link>
-      <div class="right menu">
-        <a class="ui item" @click="logout()">
-          Logout
-        </a>
+    <template v-if="user.authenticated">
+      <div class="ui secondary menu">
+        <router-link to="/home" class="item">Home</router-link>
+        <router-link to="/books" class="item">Books</router-link>
+        <router-link to="/authors" class="item">Authors</router-link>
+        <router-link to="/publishers" class="item">Publishers</router-link>
+        <div class="right menu">
+          <a class="ui item" @click="logout()">
+            Logout
+          </a>
+        </div>
       </div>
-    </div>
     <div class="ui divider"></div>
+    </template>
     <router-view/>
   </div>
 </template>
 
 <script>
 import auth from './auth'
+import router from './router'
 
 export default {
   name: 'app',
@@ -26,6 +29,13 @@ export default {
       user: auth.user
     }
   },
+  created () {
+    // Redirect the user to the login page if he's not logged in
+    if (!this.user.authenticated) {
+      this.logout()
+      router.push({ name: 'login' })
+    }
+  },
   methods: {
     logout () {
       auth.logout()

frontend/src/auth/index.js

@@ -15,7 +15,6 @@ export default {
       password: creds.password
     })
       .then(response => {
-        console.log(response)
         // Save the token to local storage for later use
         localStorage.setItem('token', response.data.token)
 
@@ -41,18 +40,28 @@ export default {
 
   logout () {
     localStorage.removeItem('token')
+    router.push({ name: 'home' })
     this.user.authenticated = false
   },
 
   checkAuth () {
-    var jwt = localStorage.getItem('token')
+    let jwt = localStorage.getItem('token')
+    this.user.authenticated = false
     if (jwt) {
-      this.user.authenticated = true
-    } else {
-      this.user.authenticated = false
+      let jwtinfos = this.parseJwt(jwt)
+      let ts = Math.round((new Date()).getTime() / 1000)
+      if (jwtinfos.exp >= ts) {
+        this.user.authenticated = true
+      }
     }
   },
 
+  parseJwt (token) {
+    let base64Url = token.split('.')[1]
+    let base64 = base64Url.replace('-', '+').replace('_', '/')
+    return JSON.parse(window.atob(base64))
+  },
+
   getAuthHeader () {
     return {
       'Authorization': 'Bearer ' + localStorage.getItem('token')

frontend/src/components/Login.vue

@@ -56,7 +56,7 @@
     beforeMount () {
       // Check if the user is already logged in, if so, redirect him to the homepage
       if (auth.user.authenticated) {
-        router.go('/home')
+        router.push({ name: 'home' })
       }
     },