HTTP interceptor en Vue, acceso con token de sesión

Generalmente cuando se implementan aplicaciones frontend con accesos a Apis disponibles en un backend, estas están protegidas bajo algún tipo de autenticación como por ejemplo JWT. A continuación se presenta un ejemplo como a partir del axios como cliente HTTP se le pasa el token de acceso a las API en una peticion HTTP.

Lo primero es definir un store, para tener acceso a los datos de la session en cualquier componente de la aplicación

#src/store.js
state: {
session: {
	logged: false,
	token: '',
	userInfo:{}
}
},
getters: {
	session: state => state.session,
	logged: state => state.session.logged,
token: state => state.session.token
},
mutations: {
	....
}

Luego en cualquier componente si el usuario ya se ha logueado tenemos acceso a los datos de la sesión

#src/componenteX.vue
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
	...mapGetters([
	'logged',
	'token',
	'userInfo'
	])
   }
}

En el archivo main.js de la aplicación configuramos axios para usar en el interceptor el token de acceso a las apis

import Vue from 'vue';
import store from 'src/store';
import router from 'src/router';
import App from 'src/App';
import interceptorsSetup from 'src/helpers/interceptors'
interceptorsSetup()
	new Vue({
	el: '#app',
	router,
	store,
	template: '<App/>',
	components: { App }
});

Definición del interceptor

#src/helpers/interceptors.js
import axios from 'axios';
import store from 'src/store';
export default function setup() {
axios.interceptors.request.use(function(config) {
	const token = store.getters.token;
	if(token) {
		config.headers.Authorization = `Bearer ${token}`;
	}
	return config;
}, function(err) {
	return Promise.reject(err);
});
}