Merge branch '1153-jwt' into 'develop'

Resolve "403 on POST requests"

Closes #1153

See merge request funkwhale/funkwhale!1138

front/src/components/audio/Player.vue

@@ -436,7 +436,6 @@ export default {
           param = "token"
           value = this.$store.state.auth.scopedTokens.listen
         }
-        console.log('HELLO', param, value, this.$store.state.auth.scopedTokens)
         sources.forEach(e => {
           e.url = url.updateQueryString(e.url, param, value)
         })

front/src/components/audio/SearchBar.vue

@@ -70,7 +70,10 @@ export default {
           if (!self.$store.state.auth.authenticated) {
             return xhrObject
           }
-          xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+
+          if (self.$store.state.auth.oauth.accessToken) {
+            xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+          }
           return xhrObject
         },
         onResponse: function (initialResponse) {

front/src/components/library/FileUploadWidget.vue

@@ -1,5 +1,6 @@
 <script>
 import FileUpload from 'vue-upload-component'
+import {setCsrf} from '@/utils'
 
 export default {
   extends: FileUpload,
@@ -32,7 +33,10 @@ export default {
       form.append(this.name, file.file, filename)
       let xhr = new XMLHttpRequest()
       xhr.open('POST', file.postAction)
-      xhr.setRequestHeader('Authorization', this.$store.getters['auth/header'])
+      setCsrf(xhr)
+      if (this.$store.state.auth.oauth.accessToken) {
+        xhr.setRequestHeader('Authorization', this.$store.getters['auth/header'])
+      }
       return this.uploadXhr(xhr, file, form)
     }
   }

front/src/components/library/TagsSelector.vue

@@ -39,7 +39,10 @@ export default {
         apiSettings: {
           url: this.$store.getters['instance/absoluteUrl']('/api/v1/tags/?name__startswith={query}&ordering=length&page_size=5'),
           beforeXHR: function (xhrObject) {
-            xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+
+            if (self.$store.state.auth.oauth.accessToken) {
+              xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+            }
             return xhrObject
           },
           onResponse(response) {

front/src/components/library/radios/Filter.vue

@@ -114,7 +114,9 @@ export default {
         settings.apiSettings = {
           url: self.$store.getters['instance/absoluteUrl'](f.autocomplete + '?' + f.autocomplete_qs),
           beforeXHR: function (xhrObject) {
-            xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+            if (self.$store.state.auth.oauth.accessToken) {
+              xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
+            }
             return xhrObject
           },
           onResponse: function (initialResponse) {

front/src/utils.js

@@ -33,3 +33,15 @@ export function parseAPIErrors(responseData, parentField) {
   }
   return errors
 }
+
+export function getCookie(name) {
+  return document.cookie
+  .split('; ')
+  .find(row => row.startsWith(name))
+  .split('=')[1];
+}
+export function setCsrf(xhr) {
+  if (getCookie('csrftoken')) {
+    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'))
+  }
+}