Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

285
Views
Vue Javascript save jwt as cookie and wait till it is saved

My login page sends login/password to the backend, receives jwt token, saves it to the cookies and redirects to /home.

The /home route has Authentication check by getting cookie by name. The problem is that at the moment, when authentication is checked immediately after login, token is undefined and no redirect takes place

router

const routes = [
  {
    path: '/login',
    component: Login,
    beforeEnter: (to, from, next ) => {
      if(isAuthenticated()) next("/home");
      else next()
    }
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/home',
    component: Menu
  }

];
router.beforeEach((to, from, next) => {
  if(!isAuthenticated() && to.path !== '/login') next('/login');
  else next();
});

authentication check middleware

export const isAuthenticated = () => {
    const token = getCookie("token");
    console.log(token)
    if (token) {
        const jwt = parseJwt(token)
        if (Date.now() >= jwt.exp * 1000) {
            console.log('unauthenticated - expired token')
            return false
        } else {
            console.log('authenticated - valid token')
            return true
        }
    } else {
        console.log('unauthenticated - no token in cookie')
        return false
    }
}

const getCookie = (name) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}


const parseJwt = (token) => {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
}

Store action

login({ commit }, loginRequest) {
    commit("LOGIN_PENDING")

    axios.post("/api/login", loginRequest)
    .then(
      (response) => {
        document.cookie =`token=${response.data.token}`;
        commit("SET_TOKEN", response.data.token);
        commit("LOGIN_COMPLETE");
      },
      (error) => {
        if(error.response.status==401) {
          commit("SET_INVALID_LOGIN_CREDENTIALS", true);
          commit("LOGIN_COMPLETE");
        }   
      }
    )
  }

How to save the token to the cookie (document.cookie =token=${response.data.token}; ) and wait till it is saved before proceeding to the next steps?

Any help is appreciated!

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

if all you wish is to store the authentication state, I would suggest you to use cookie-session on backend... it would automatically handles all this for you - https://www.npmjs.com/package/cookie-session

about 4 years ago · Juan Pablo Isaza Report

0

I have figured out the reason of the problem - the login acction in the vuex was not desclared as asynchronous, so I made added async to the login, await to the axios post and the problem was solved

async login({ commit }, loginRequest) {
    commit("LOGIN_PENDING")

    await axios.post("/api/login", loginRequest)
    .then(
      (response) => {
        document.cookie =`token=${response.data.token}`;
        commit("SET_TOKEN", response.data.token);
        commit("LOGIN_COMPLETE");
      },
      (error) => {
        if(error.response.status==401) {
          commit("SET_INVALID_LOGIN_CREDENTIALS", true);
          commit("LOGIN_COMPLETE");
        }   
      }
    )
  }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!