Just starting out on my first project using typescript and encountering some interesting challenges.
In my Login.vue file, I have the following method:
const doLogin = async () => {
try {
const { email, password } = credentials.value;
console.log(credentials.value)
await state.login(email, password).then(()=>{
console.log(state.dashboardData.value)
router.push({path : "/dashboard/"+state.dashboardData.value[0].hashCode, replace: true });
});
} catch (error) {
console.log(error);
handleAlert(error.error, true);
}
};
The state.login function is defined in auth.ts. The login process itself works fine; you can see that I make a second API call immediately after logging in to retrieve a list of dashboard services. This call also works well and saves the data to the store. However, the problem I'm facing (on this page and another) is that the state.dashboardData is only accessible after manually refreshing the page.
const login = (email: any,password: any) =>{
const url = process.env.VUE_APP_API_URL+'/authentication_token'
return new Promise((resolve, reject) => {
axios
.post(url, {email:email,password:password})
.then(response => {
console.log(response.data.token)
state.token=response.data.token
state.initialized=true
state.user=true
const urlDash = process.env.VUE_APP_API_URL + '/api/dashboards'
const config = {
headers: { 'Authorization': 'Bearer '+response.data.token }
};
axios
.get(urlDash,config)
.then(response => {
console.log(response)
state.dashboardData=response.data['hydra:member']
})
resolve(state)
})
.catch(() => {
state.error= 'Incorrect username or password'
reject(state)
})
})
}