Solving 401 Unauthenticated with VueJS and Axios
Aug 26, 2018 00:00 · 257 words · 2 minutes read
I kept getting a “401 Unauthenticated” error with my VueJS/Laravel application. I could login without a problem. The Vuex state had my token. Local Storage had the token, but for some reason the initial call to fill the dashboard after login failed every time. What’s worse - a quick refresh of the page and it was fine.
After much reading, searching, and head-scratching I discovered that Axios Interceptors would do the trick.
Here’s the original code where I was calling the local storage token from within the API client this is the bad stuff. don’t copy/paste this:
import axios from "axios";
import { LocalStorage } from "quasar";
const token = LocalStorage.getItem("TOKEN NAME GOES HERE");
const apiClient = axios.create({
baseURL: process.env.VUE_APP_API_URL,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
export default {
fetchInstitutions() {
return apiClient.get("/institution");
},
Here’s the new code where I’ve created an http-common.js file this is the good stuff
import axios from "axios";
import { LocalStorage } from "quasar";
const apiClient = axios.create({
baseURL: process.env.VUE_APP_API_URL,
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
});
apiClient.interceptors.request.use(
config => {
let token = LocalStorage.getItem("TOKEN NAME GOES HERE");
if (token) {
config.headers["Authorization"] = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
export default apiClient;
And then import http-common.js
into the file that calls the API:
import apiClient from "@/functions/http-common.js";
export default {
fetchInstitutions() {
return apiClient.get("/institution");
},
...
(PS) I know that some people take issue with the use of storing the token in Local Storage. I don’t care.