Skip to content

A VueJS directive for downloading files that are under a protected route schema

License

Notifications You must be signed in to change notification settings

nachodd/vue-auth-href

Repository files navigation

🔒 vue-auth-href

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.

📦 Installation

npm install --save vue-auth-href
# or
yarn add vue-auth-href

🔧 Initialization

JWT 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)

🕹 Usage

<!-- 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>
🔎 Demo:

Demo 1

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>

⚙️ Options

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'

🔎 Other Demos:

...
Vue.use(VueAuthHref, {
  token: () => store.getters["auth/token"],
  textMode: "text",
  downloadingText: "Descargando",
  additionalHeaders: { env: "test" }, // additional headers set on the request
}
...

Demo 2

<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>

Demo 3

🤝 Contributing

This repository is open for contribution. So, go ahead, fork it & send me a PR!

⭐️ Support

If you like this project, You can support me with starring ⭐ this repository

📄 License

MIT

Developed with ❤️ by nachodd

About

A VueJS directive for downloading files that are under a protected route schema

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published