Description
Vue Wrapper For Axios-Jwt
Configuration
Parameters
Required
refresh_endpoint {string}
The endpoint to obtain a new access token using the refresh token. (e.x. /api/v1/auth/token/refresh/)
Optional
login_endpoint {string}
The endpoint to log the user in via some kind of credentials. (e.x. /api/v1/auth/login)
instance {axios}
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}
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
})
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/'});
const app = new Vue({
// ... other junk
axiosJwtHandler
}).$mount('#app');
<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.
1 Sep 30, 2017
128 Dec 17, 2022
6 Jun 10, 2019
0 Apr 2, 2019
112 Dec 17, 2022
0 Apr 29, 2021
1.4k Nov 26, 2022
2.3k Dec 30, 2022
0 Jul 7, 2019
10 Jan 1, 2023
1 Mar 18, 2021
57 Nov 10, 2022
288 Oct 17, 2022
6 Jul 30, 2020
15 Feb 7, 2018
0 Jan 17, 2019
0 Apr 22, 2021
4 Dec 4, 2021