Refreshing Auth Token for Uploads
I'm encountering this problem a lot with different third party components and I'm starting to think it may be the way I'm formatting my code.
In this particular example, I'm using the vue-froala-wysiwyg component. It has an option for uploading images via my rest api. It let's me set request headers when it's initialized.
The problem is that my auth token is refreshed every five minutes. And it seems that once the component is initialized, it just uses the initial value that was passed to it for the headers. So if a user tries to upload a photo after five minutes, it doesn't work because it's referencing the old token.
I'm at my wits end trying to solve this. Any help would be greatly appreciated. Below I've tried to show an example of the code...
<template>
<div>
<froala :tag="'textarea'" :config="config" v-model="form.content" id="froala-editor"></froala>
</div>
</template>
<script>
import VueFroala from 'vue-froala-wysiwyg';
import { froalaService } from '../../services/';
export default {
data() {
return {
form {
content: ''
},
config: Object,
}
}
created() {
this.initFroala();
},
methods: {
initFroala() {
let vm = this;
let j = $;
this.config = {
requestHeaders: {
Authorization: `Bearer ${localStorage.getItem('dh_access_token')}`
},
imageUploadURL: 'https://my-api.com',
imageUploadParam: 'image_name'
}
}
}
}
</script>
Please or to participate in this conversation.