This is a quick example of how to automatically set the HTTP Authorization header for requests sent with axios from a Vue.js (v2 or v3) app to an API when the user is authenticated.
The code snippet in this tutorial is used a couple of Vue Facebook Login tutorials I posted a little while ago, one built with Vue.js v2 and the other with Vue 3, to see the code running in a live demo app check out the following posts:.
Vue 2:Vue.js - Facebook Login Tutorial & Example.
Vue 3:Vue 3 - Facebook Login Tutorial & Example.
RxJS is used in the Vue tutorials to store the current authenticated user state in the accountService, but RxJS isn't required if your Vue.js app uses another way to store the user's logged in state such as Vuex or something else.
The only requirement is that you can check if the user is logged in from the axios interceptor function below (jwtInterceptor()).
Vue – import Axios
Installing axios from npm
Vue Axios example Overview
Examples of Vue.js Axios
How Axios works in Vue.js?