I am programming the client of an api with typescript. I use axios and vuex,
this is the code
import { CredentialsInterface } from '../store/Interfaces/auth';
import Store from '@/store/index';
import axios from 'axios';
class AuthenticateClient {
http: any;
credentials: CredentialsInterface;
constructor() {
this.credentials = Store.getters.credentials;
console.log(this.credentials);
this.http = axios.create({
baseURL: 'https://api.dashboarda.proyect',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization:
this.credentials.tokenType + ' ' + this.credentials.token
}
});
}
async get(endPoint: string, data: any) {
console.log(this.http);
try {
return await this.http.get(endPoint);
} catch (error) {
if (error.response.status == 401) {
Store.commit('deleteSession');
}
}
}
async post(endPoint: string, data: any) {
try {
return await this.http.post(endPoint, data);
} catch (error) {
if (error.response.status == 401) {
Store.commit('deleteSession');
}
}
}
}
export default new AuthenticateClient();
The problem you have is that it does not initialize the token and the token_type
These are the headers with which the request comes out:
And in the console if the credentials are initialized
I know it's a synchronization problem because when the function is executed, the vuex variables are not yet loaded.
However I can't return a promise to the constructor or I don't know how to do this.
Notice that when the credentials are stored in:
It is showing:
Apparently when bringing the keys of the object where the credentials are, it passes the camelcase to the underscore or they must be calling different ones in the Store.
instead of doing
Try this:
I hope it helps you!