add axios plugin for global options

ffplayout/frontend/nuxt.config.js

@@ -43,6 +43,7 @@ export default {
      ** Plugins to load before mounting the App
      */
     plugins: [
+        { src: '~/plugins/axios' },
         { src: '~/plugins/filters' },
         { src: '~plugins/video.js', ssr: false },
         { src: '~plugins/scrollbar.js', ssr: false },

ffplayout/frontend/pages/index.vue

@@ -130,8 +130,8 @@
 
                     <div class="actions">
                         <b-button-group class="actions-grp">
-                            <b-button to="/control" variant="primary">
+                            <b-button to="/player" variant="primary">
-                                Control
+                                Player
                             </b-button>
                             <b-button to="/media" variant="primary">
                                 Media
@@ -212,13 +212,13 @@ export default {
         },
 
         async sysStats () {
-            const response = await this.$axios.get('api/stats/?stats=all', { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken }, progress: false })
+            const response = await this.$axios.get('api/stats/?stats=all')
             this.stat = response.data
 
             if (process.browser) {
                 this.interval = setInterval(async () => {
                     await this.$store.dispatch('auth/inspectToken')
-                    const response = await this.$axios.get('api/stats/?stats=all', { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken }, progress: false })
+                    const response = await this.$axios.get('api/stats/?stats=all')
                     this.stat = response.data
                 }, 2000)
             }

ffplayout/frontend/pages/logging.vue

@@ -75,10 +75,7 @@ export default {
     methods: {
         async getLog (type) {
             await this.$store.dispatch('auth/inspectToken')
-            const response = await this.$axios.get(
+            const response = await this.$axios.get(`api/log/?type=${type}`)
-                `api/log/?type=${type}`,
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             if (response.data.log) {
                 this.currentLog = response.data.log
@@ -86,11 +83,7 @@ export default {
         },
         async getSystemLog () {
             await this.$store.dispatch('auth/inspectToken')
-            const response = await this.$axios.post(
+            const response = await this.$axios.post('api/system/', { run: 'log' })
-                'api/system/',
-                { run: 'log' },
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             if (response.data.data) {
                 this.currentLog = response.data.data

ffplayout/frontend/pages/media.vue

@@ -277,8 +277,7 @@ export default {
 
             await this.$axios.post(
                 'api/media/op/',
-                { folder: this.folderName, path: this.crumbs.map(e => e.text).join('/') },
+                { folder: this.folderName, path: this.crumbs.map(e => e.text).join('/') }
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
             )
 
             this.$root.$emit('bv::hide::modal', 'folder-modal')
@@ -307,14 +306,13 @@ export default {
 
         async onSubmitUpload (evt) {
             evt.preventDefault()
-            await this.$store.dispatch('auth/inspectToken')
-
             const uploadProgress = fileName => (progressEvent) => {
                 const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
                 this.currentProgress = progress
             }
 
             for (const [i, file] of this.inputFiles.entries()) {
+                await this.$store.dispatch('auth/inspectToken')
                 this.uploadTask = file.name
 
                 const config = {
@@ -330,8 +328,7 @@ export default {
                 )
                     .then(
                         this.overallProgress = (i + 1) * 100 / this.inputFiles.length,
-                        this.currentProgress = 0,
+                        this.currentProgress = 0
-                        await this.$store.dispatch('auth/inspectToken')
                     )
                     .catch(err => console.log(err))
             }
@@ -406,10 +403,7 @@ export default {
                 pathName = this.deleteSource
             }
 
-            await this.$axios.delete(
+            await this.$axios.delete(`api/media/op/?file=${encodeURIComponent(file)}&path=${encodeURIComponent(pathName)}`)
-                `api/media/op/?file=${encodeURIComponent(file)}&path=${encodeURIComponent(pathName)}`,
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
                 .catch(err => console.log(err))
 
             this.$root.$emit('bv::hide::modal', 'delete-modal')

ffplayout/frontend/pages/message.vue

@@ -281,7 +281,7 @@ export default {
             if (preset) {
                 req = `?name=${preset}`
             }
-            const response = await this.$axios.get(`api/messenger/${req}`, { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } })
+            const response = await this.$axios.get(`api/messenger/${req}`)
 
             if (response.data && !preset) {
                 for (const item of response.data) {
@@ -333,11 +333,7 @@ export default {
                 overall_alpha: this.form.overallAlpha
             }
 
-            const response = await this.$axios.post(
+            const response = await this.$axios.post('api/messenger/', preset)
-                'api/messenger/',
-                preset,
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             if (response.status === 201) {
                 this.success = true
@@ -369,11 +365,7 @@ export default {
                     overall_alpha: this.form.overallAlpha
                 }
 
-                const response = await this.$axios.put(
+                const response = await this.$axios.put(`api/messenger/${this.form.id}/`, preset)
-                    `api/messenger/${this.form.id}/`,
-                    preset,
-                    { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-                )
 
                 if (response.status === 200) {
                     this.success = true
@@ -393,10 +385,7 @@ export default {
         async deletePreset () {
             await this.$store.dispatch('auth/inspectToken')
             if (this.selected) {
-                await this.$axios.delete(
+                await this.$axios.delete(`api/messenger/${this.form.id}/`)
-                    `api/messenger/${this.form.id}/`,
-                    { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-                )
             }
 
             this.$bvModal.hide('delete-modal')
@@ -422,11 +411,7 @@ export default {
                 boxborderw: this.form.border
             }
 
-            const response = await this.$axios.post(
+            const response = await this.$axios.post('api/send/', { data: obj })
-                'api/send/',
-                { data: obj },
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             if (response.data && response.data.status.Success && response.data.status.Success === '0 Success') {
                 this.success = true

ffplayout/frontend/pages/player.vue

@@ -366,11 +366,7 @@ export default {
         async getStatus () {
             await this.$store.dispatch('auth/inspectToken')
 
-            const status = await this.$axios.post(
+            const status = await this.$axios.post('api/system/', { run: 'status' })
-                'api/system/',
-                { run: 'status' },
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             if (status.data.data && status.data.data === 'active') {
                 this.isPlaying = 'is-playing'
@@ -380,11 +376,7 @@ export default {
         },
         async playoutControl (state) {
             await this.$store.dispatch('auth/inspectToken')
-            await this.$axios.post(
+            await this.$axios.post('api/system/', { run: state })
-                'api/system/',
-                { run: state },
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
-            )
 
             setTimeout(() => { this.getStatus() }, 1000)
         },
@@ -450,8 +442,7 @@ export default {
 
             await this.$axios.post(
                 'api/playlist/',
-                { data: { channel: this.$store.state.playlist.playlistChannel, date: this.today, program: saveList } },
+                { data: { channel: this.$store.state.playlist.playlistChannel, date: this.today, program: saveList } }
-                { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } }
             )
         }
     }

ffplayout/frontend/plugins/axios.js

@@ -0,0 +1,21 @@
+export default function ({ $axios, store, redirect }) {
+    $axios.onRequest((config) => {
+        const token = store.state.auth.jwtToken
+        if (token) {
+            config.headers.common.Authorization = `Bearer ${token}`
+        }
+
+        // disable progress on auth and stats
+        if (config.url.includes('stats') || config.url.includes('auth')) {
+            config.progress = false
+        }
+    })
+
+    $axios.onError((error) => {
+        const code = parseInt(error.response && error.response.status)
+
+        if (code === 400) {
+            redirect('/')
+        }
+    })
+}

ffplayout/frontend/store/config.js

@@ -25,9 +25,9 @@ export const mutations = {
 }
 
 export const actions = {
-    async getGuiConfig ({ commit, state, rootState }) {
+    async getGuiConfig ({ commit, state }) {
-        const options = await this.$axios.options('api/guisettings/', { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const options = await this.$axios.options('api/guisettings/')
-        const response = await this.$axios.get('api/guisettings/', { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const response = await this.$axios.get('api/guisettings/')
 
         if (options.data) {
             const choices = options.data.actions.POST.net_interface.choices.map(function (obj) {
@@ -43,29 +43,29 @@ export const actions = {
         }
     },
 
-    async setGuiConfig ({ commit, state, rootState }, obj) {
+    async setGuiConfig ({ commit, state }, obj) {
         const stringObj = JSON.parse(JSON.stringify(obj))
         stringObj.extra_extensions = obj.extra_extensions.join(' ')
-        const update = await this.$axios.put('api/guisettings/1/', stringObj, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const update = await this.$axios.put('api/guisettings/1/', stringObj)
         return update
     },
 
-    async getPlayoutConfig ({ commit, state, rootState }) {
+    async getPlayoutConfig ({ commit, state }) {
-        const response = await this.$axios.get('api/config/?configPlayout', { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const response = await this.$axios.get('api/config/?configPlayout')
 
         if (response.data) {
             commit('UPDATE_PLAYLOUT_CONFIG', response.data)
         }
     },
 
-    async setPlayoutConfig ({ commit, state, rootState }, obj) {
+    async setPlayoutConfig ({ commit, state }, obj) {
-        const update = await this.$axios.post('api/config/?configPlayout', { data: obj }, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const update = await this.$axios.post('api/config/?configPlayout', { data: obj })
         return update
     },
 
-    async getUserConfig ({ commit, state, rootState }) {
+    async getUserConfig ({ commit, state }) {
-        const user = await this.$axios.get('api/current/user/', { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const user = await this.$axios.get('api/current/user/')
-        const response = await this.$axios.get(`api/users/?username=${user.data.username}`, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const response = await this.$axios.get(`api/users/?username=${user.data.username}`)
 
         if (user.data) {
             commit('SET_CURRENT_USER', user.data.username)
@@ -75,8 +75,8 @@ export const actions = {
         }
     },
 
-    async setUserConfig ({ commit, state, rootState }, obj) {
+    async setUserConfig ({ commit, state }, obj) {
-        const update = await this.$axios.put(`api/users/${obj.id}/`, obj, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const update = await this.$axios.put(`api/users/${obj.id}/`, obj)
         return update
     }
 }

ffplayout/frontend/store/media.js

@@ -17,10 +17,10 @@ export const mutations = {
 }
 
 export const actions = {
-    async getTree ({ commit, dispatch, state, rootState }, { extensions, path }) {
+    async getTree ({ commit, dispatch, state }, { extensions, path }) {
         const crumbs = []
         let root = '/'
-        const response = await this.$axios.get(`api/media/?extensions=${extensions}&path=${path}`, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const response = await this.$axios.get(`api/media/?extensions=${extensions}&path=${path}`)
 
         if (response.data.tree) {
             const pathArr = response.data.tree[0].split('/')

ffplayout/frontend/store/playlist.js

@@ -50,8 +50,8 @@ export const mutations = {
 }
 
 export const actions = {
-    async getPlaylist ({ commit, dispatch, state, rootState }, { dayStart, date }) {
+    async getPlaylist ({ commit, dispatch, state }, { dayStart, date }) {
-        const response = await this.$axios.get(`api/playlist/?date=${date}`, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } })
+        const response = await this.$axios.get(`api/playlist/?date=${date}`)
 
         if (response.data && response.data.program) {
             commit('UPDATE_PLAYLIST_CHANNEL', response.data.channel)