A VueJS directive for downloading files that are under a protected route schema (that needs an Authorization Header).
It's a common thing on projects to have routes that are wrapped by an authentication middleware. Sometimes, depending on the project security schema, the access to files can be protected too. The problem is, that when in your frontend you put a link (an anchor tag) to a file that is protected, it can be tricky to make the authorization process. This is where this little plugin comes to help.
This plugin comes in the form of a Vue.js directive that is ready to work with JWT auth schema. On the GET request made by an anchor tag when it's clicked, it adds the Authorization: Bearer <TOKEN> header automatically.
npm install --save vue-auth-href
# or
yarn add vue-auth-hrefJWT Token must be set in order to the download works. It can be set via option in the initialization, providing a function that returns the JWT Token, or inline.
import Vue from 'vue'
import VueAuthHref from 'vue-auth-href'
import store from "store/index"
// Not mandatory, options can be set inline
const options = {
token: () => store.getters["jwt_token"], // Note that this MUST BE a function that returns the token.
// other options here (full list of options described below)
}
Vue.use(VueAuthHref, options)<!-- Initialization via Options: -->
<a v-auth-href href="https://link.to/your/protected/file.zip">Your File</a>
<!-- Inline Initialization: -->
<a v-auth-href="{ dotsAnimation: false }" href="https://link.to/your/protected/file.zip">Your File</a>Some options can be passed inline to the directive, like:
<a v-auth-href="{token: 'TOKEN'}" href="https://link.to/your/protected/file.zip">Your File</a>| Option | Type | Default | Can be set on | Description |
|---|---|---|---|---|
token |
String | Initialization / Inline | The JWT Token used for authentication. This parameter is REQUIRED | |
headerAuthKey |
String | "Authorization" | Initialization | The key used in the authorization header |
headerAuthValuePrefix |
String | "Bearer " | Initialization | The prefix of the value used in the authorization header |
additionalHeaders |
Object | {} | Initialization | Additional headers to be sent on the request header. If it is setted, must be a javascript object |
textMode |
String | "text" | Initialization / Inline | Indicates to use 'text' or 'html' when link is clicked (these two are the only possible values) |
downloadingText |
String | "Downloading" | Initialization / Inline | Text to be shown when link is clicked and before the file is downloaded |
downloadingHtml |
String | "" | Initialization / Inline | HTML to be shown when link is clicked and before the file is downloaded. Can be used, for instance, to display an icon (see examples below) |
dotsAnimation |
Boolean | true | Initialization / Inline | Show the fancy dots animation when link is clicked. Works only when textMode: 'text' |
...
Vue.use(VueAuthHref, {
token: () => store.getters["auth/token"],
textMode: "text",
downloadingText: "Descargando",
additionalHeaders: { env: "test" }, // additional headers set on the request
}
...<a v-auth-href="{
token: $store.getters['auth/token'],
textMode: 'html',
downloadingHtml: '<i class=\'fas fa-cog fa-spin\'></i>',
}" href="https://link.to/your/protected/file.zip">Your File</a>This repository is open for contribution. So, go ahead, fork it & send me a PR!
If you like this project, You can support me with starring ⭐ this repository
Developed with ❤️ by nachodd