vue-axios-jwt

Vue Wrapper For Axios-Jwt

Usage

import Vue from 'vue';
import VueAxiosJwt from 'vue-axios-jwt';

Vue.use(VueAxiosJwt);

const axiosJwtHandler = new AxiosJwtHandler({refresh_endpoint: '/api/v1/auth/token/refresh/', instance});

const app = new Vue({
    // ... other junk
    axiosJwtHandler
}).$mount('#app');

Configuration

Required parameters.

refresh_endpoint {string}

The endpoint to obtain a new access token using the refresh token. (e.x. /api/v1/auth/token/refresh/)

login_endpoint {string} [optional]

The endpoint to log the user in via some kind of credentials. (e.x. /api/v1/auth/login)

instance {axios} [optional]

The axios instance you want to use for making calls to the API.

If one is not specified, then it will create an instance via axios.create().

This is useful if you want to specify a different base URL or some other axios configurations.

transformer {function => object} [optional]

A callable object which takes an AxiosResponse and returns an object such as {accessToken: 'string', refreshToken: 'string'}.

The default implementation is:

typescript

import {AxiosResponse} from 'axios';
import {IAuthTokens} from 'axios-jwt';

const defaultTransformer = (response: AxiosResponse): IAuthTokens => ({
    accessToken: response.data.access_token,
    refreshToken: response.data.refresh_token
});

Or if you prefer ES6...

javascript

const defaultTransformer = (response) => ({
    accessToken: response.data.access_token,
    refreshToken: response.data.refresh_token
})

Making Requests

<template>
    <div>
        <span>Hello {{ user }}</span>
    </div>
</template>

<script>
export default {
    name: 'Example',
    data() {
        return {
            user: ''
        }
    },
    mounted() {
        this.$axios.get('/api/v1/user/')
            .then(response => { this.user = response.data.user });
    }
}
</script>

Using it in other places

/**
* src/apiClient.js
*/
import AxiosJwtHandler from 'vue-axios-jwt';
const handler = new AxiosJwtHandler({refresh_endpoint: '/api/v1/auth/refresh/'});
export default handler.instance;

/**
* src/main.js
*/
import apiClient from './apiClient';
apiClient.post('/api/v1/something/', {data: {ayy: 'lmao'}});

The above structure is nice when you have your vuex store in different modules and need to make XHR requests within the actions.