VueJS 3 Typescript

Its my first project working with typescript and having a few weird challenges.

My Login.vue has 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);
      }
    };

state.login is from auth.ts. The login works, as you can see, I make a second API call immediately on login, it grabs a list of dashboard service. This call works well also. It saves those to the store as well. That works. However, the issue I have (both here and another page) is that the state.dashboardData is only available 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)
          })
        })
    }

1 answer

  • answered 2020-11-20 11:39 TDawg

    I added more console.log and discovered it was returning before the response. Adding await solved it. I don't know if this is righgt solution, but it worked.

    const login = async(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(async(response) => {
                  console.log(response.data.token)
                state.token=response.data.token
                state.initialized=true
                state.user=true
    
                // const jwt: {email: any}=jwtDecode(response.data.token)
                // state.email=jwt.email
                
                //get DD
                const urlDash = process.env.VUE_APP_API_URL + '/api/dashboards'
                // console.log(store.token.value)
                const config = {
                    headers: { 'Authorization': 'Bearer '+response.data.token }
                };
          
                // console.log(config)
                
                      await 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)
              })
            })
        }