Added authentication barrier for the backend API. Added global error handling for the frontend. Added interval stops in case of backend request errors

Author: michelvocks

frontend/client/app.js

@@ -7,6 +7,7 @@ import router from './router'
 import store from './store'
 import * as filters from './filters'
 import { TOGGLE_SIDEBAR } from 'vuex-store/mutation-types'
+import Notification from 'vue-bulma-notification-fixed'
 import auth from './auth'
 import lodash from 'lodash'
 import VueLodash from 'vue-lodash'
@@ -40,6 +41,59 @@ Vue.directive('focus', {
   }
 })
 
+const NotificationComponent = Vue.extend(Notification)
+const openNotification = (propsData = {
+  title: '',
+  message: '',
+  type: '',
+  direction: '',
+  duration: 4500,
+  container: '.notifications'
+}) => {
+  return new NotificationComponent({
+    el: document.createElement('div'),
+    propsData
+  })
+}
+Vue.prototype.$notify = openNotification
+
+function handleError (error) {
+  // if the server gave a response message, print that
+  if (error.response.data.error) {
+    // duration should be proportional to the error message length
+    openNotification({
+      title: 'Error: ' + error.response.status,
+      message: error.response.data.error,
+      type: 'danger',
+      duration: error.response.data.error.length > 60 ? 20000 : 4500
+    })
+    console.log(error.response.data.error)
+  } else {
+    if (error.response.status === 404) {
+      openNotification({
+        title: 'Error: 404',
+        message: 'Not found',
+        type: 'danger'
+      })
+    } else if (error.response.status === 403) {
+    // Access denied
+      openNotification({
+        title: 'Error: 403',
+        message: 'Not authorized. Please login first.',
+        type: 'danger'
+      })
+    } else {
+      openNotification({
+        title: 'Error: ' + error.response.status.toString(),
+        message: '',
+        type: 'danger'
+      })
+    }
+    console.log(error.response.data)
+  }
+}
+Vue.prototype.$onError = handleError
+
 router.beforeEach((route, redirect, next) => {
   if (state.app.device.isMobile && state.app.sidebar.opened) {
     store.commit(TOGGLE_SIDEBAR, false)

frontend/client/views/overview/index.vue

@@ -31,7 +31,8 @@
 export default {
   data () {
     return {
-      pipelines: []
+      pipelines: [],
+      intervalID: null
     }
   },
 
@@ -40,7 +41,7 @@ export default {
     this.fetchData()
 
     // periodically update dashboard
-    setInterval(function () {
+    this.intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
   },
@@ -58,8 +59,9 @@ export default {
             this.pipelines = response.data
           }
         })
-        .catch(error => {
-          console.log(error.response.data)
+        .catch((error) => {
+          clearInterval(this.intervalID)
+          this.$onError(error)
         })
     },
 
@@ -72,8 +74,9 @@ export default {
             this.$router.push({path: '/pipelines/detail', query: { pipelineid: pipelineid, runid: response.data.id }})
           }
         })
-        .catch(error => {
-          console.log(error.response.data)
+        .catch((error) => {
+          clearInterval(this.intervalID)
+          this.$onError(error)
         })
     },
 

frontend/client/views/pipelines/create.vue

@@ -231,7 +231,8 @@ export default {
           field: 'created'
         }
       ],
-      historyRows: []
+      historyRows: [],
+      intervalID: null
     }
   },
 
@@ -247,7 +248,7 @@ export default {
     this.fetchData()
 
     // periodically update history dashboard
-    setInterval(function () {
+    this.intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
   },
@@ -265,8 +266,9 @@ export default {
             this.historyRows = response.data
           }
         })
-        .catch(error => {
-          console.log(error.response.data)
+        .catch((error) => {
+          clearInterval(this.intervalID)
+          this.$onError(error)
         })
     },
 
@@ -350,8 +352,8 @@ export default {
           // Run fetchData to see the pipeline in our history table
           this.fetchData()
         })
-        .catch(error => {
-          console.log(error.response.data)
+        .catch((error) => {
+          this.$onError(error)
         })
     },
 

frontend/client/views/pipelines/detail.vue

@@ -46,12 +46,10 @@
 <script>
 import Vue from 'vue'
 import Vis from 'vis'
-import VueTippy from 'vue-tippy'
 import VueGoodTable from 'vue-good-table'
 import moment from 'moment'
 
 Vue.use(VueGoodTable)
-Vue.use(VueTippy)
 
 export default {
 
@@ -106,15 +104,18 @@ export default {
           },
           arrows: {to: true}
         }
-      }
+      },
+      intervalID: null
     }
   },
 
   mounted () {
-    this.fetchData()
+    // View should be re-rendered
+    this.lastRedraw = false
 
     // periodically update view
-    setInterval(function () {
+    this.fetchData()
+    this.intervalID = setInterval(function () {
       this.fetchData()
     }.bind(this), 3000)
   },
@@ -158,6 +159,10 @@ export default {
             }
             this.runsRows = pipelineRuns.data
           }.bind(this)))
+          .catch((error) => {
+            clearInterval(this.intervalID)
+            this.$onError(error)
+          })
       } else {
         // Do concurrent request
         this.$http.all([this.getPipeline(pipelineID), this.getPipelineRuns(pipelineID)])
@@ -168,6 +173,10 @@ export default {
             }
             this.runsRows = pipelineRuns.data
           }.bind(this)))
+          .catch((error) => {
+            clearInterval(this.intervalID)
+            this.$onError(error)
+          })
       }
     },
 
@@ -271,7 +280,7 @@ export default {
       }
 
       // If pipelineView already exist, just update it
-      if (window.pipelineView) {
+      if (window.pipelineView && this.nodes && this.edges) {
         // Redraw
         this.nodes.clear()
         this.edges.clear()

handlers/handler.go

@@ -2,7 +2,11 @@ package handlers
 
 import (
 	"crypto/rand"
+	"errors"
+	"fmt"
+	"strings"
 
+	jwt "github.com/dgrijalva/jwt-go"
 	scheduler "github.com/gaia-pipeline/gaia/scheduler"
 	"github.com/gaia-pipeline/gaia/store"
 	"github.com/kataras/iris"
@@ -12,6 +16,10 @@ const (
 	apiVersion = "v1"
 )
 
+var (
+	errNotAuthorized = errors.New("no or invalid jwt token provided. You are not authorized")
+)
+
 // storeService is an instance of store.
 // Use this to talk to the store.
 var storeService *store.Store
@@ -53,5 +61,54 @@ func InitHandlers(i *iris.Application, store *store.Store, scheduler *scheduler.
 	i.Get(p+"pipelines/start/{id:string}", PipelineStart)
 	i.Get(p+"pipelines/runs/{pipelineid:string}", PipelineGetAllRuns)
 
+	// Authentication Barrier
+	i.UseGlobal(authBarrier)
+
 	return nil
 }
+
+// authBarrier is the middleware which prevents user exploits.
+// It makes sure that the request contains a valid jwt token.
+// TODO: Role based access
+func authBarrier(ctx iris.Context) {
+	// Login resource is open
+	if strings.Contains(ctx.Path(), "users/login") {
+		ctx.Next()
+		return
+	}
+
+	// Get JWT token
+	jwtRaw := ctx.GetHeader("Authorization")
+	split := strings.Split(jwtRaw, " ")
+	if len(split) != 2 {
+		ctx.StatusCode(iris.StatusForbidden)
+		ctx.WriteString(errNotAuthorized.Error())
+		return
+	}
+	jwtString := split[1]
+
+	// Parse token
+	token, err := jwt.Parse(jwtString, func(token *jwt.Token) (interface{}, error) {
+		// Validate signing method
+		if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
+			return nil, fmt.Errorf("unexpected signing method: %v", token.Header["alg"])
+		}
+
+		// return secret
+		return jwtKey, nil
+	})
+	if err != nil {
+		ctx.StatusCode(iris.StatusForbidden)
+		ctx.WriteString(err.Error())
+		return
+	}
+
+	// Validate token
+	if _, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
+		// All ok, continue
+		ctx.Next()
+	} else {
+		ctx.StatusCode(iris.StatusForbidden)
+		ctx.WriteString(errNotAuthorized.Error())
+	}
+}