VueJS / Flask / - How do I protect pages/routes on the front end with JWTs generated on the back end?

Question

So I've created a small 2 page VUE with a login page and then routed over to a search page. On login the Python handles the LDAP check and creates the JWT and it looks like it exists in the cookies in the browser however i'm not sure how to handle it when back in "Vue" land.

In addition I though it wasn't great to keep this info in cookies in the browser....hmmmmm

const routes = [
  {
    path: '/',
    name: 'home',
    component: LoginEntry,
    props:{test:'Service Center Search Portal'}
  },
  {
    path: '/scsearch',
    name: 'scsearch',
    component: SearchView
  },

The cookies which I see...

---

Added Code

router.beforeEach(async (to, from, next) => {
  console.log('runniing router');
  console.log(to.name);
  
  if (to.name === "scsearch") {
  
    const response = await axios.get('/api/jwt/check');
    console.log('juust did call');
    console.log(response.status);
    if ( response.status === 401 ) {
      console.log('ressponse status 401');
      return next({ name: "home" });
  }
  console.log('doing noothiing');
  next();
}else{
  next();
}
});

Added Code -2 (Working)

router.beforeEach(async (to, from, next) => {
  console.log('runniing router');
  console.log(to.name);
 
  if (to.name === "scsearch") {
 
  console.log('doing call');
  const response = await axios.get('/api/jwt/check')
  .then(function(value){
    console.log(value);
    next('/');
  })
  .catch(function(err){
    console.log(err)
  });
  
  console.log('juust did call');
  console.log(response);

  console.log('doing noothiing');
  next();
}else{
  next();
}
});

Answer 1

As for JWT, there is no better place to store them than the cookie. LocalStorage/sessionStorage could be unsafe (Read about Cross-Site-Scripting attacks).

I don't have any experience with Vue, but i guess to protect your 'search page', you should have something in your local state, that says the author has been authorized, if not route the client to login page.

Answer 2

I'm still not sure if this is what you want, but from your question, I assume that:

1. You are using Vue SPA
2. You want user that's not logged in can't access route /scsearch on your Vue app
3. You store your JWT on cookie and can be accessed with document.cookie
4. If there's JWT on cookie, that means user is logged in, if there's no JWT on cookie, that means user is logged out.

What you want is navigation guard, this is how you use it:

// function to get cookie by name, taken from https://stackoverflow.com/a/15724300/12397250
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}



const router = new VueRouter({ ... })

// do something everytime user is changing route
router.beforeEach((to, from, next) => {
  // if user is accesing route "ssearch" and not logged in, redirect to home
  // assuming you store your jwt on your cookie with key "authtoken"
  if (to.name === "ssearch" && !getCookie("authtoken")) {
    // User is not logged in, redirect to route "home"
    // return here is important so you don't call other next() below
    return next({ name: "home" });
  }

  // Do nothing
  next();
});

const app = new Vue({
  router
}).$mount('#app')

Edit:

Since you are using HTTPOnly cookie, you need to check it by sending a request to your backend API.

for example:

router.beforeEach(async (to, from, next) => {

  
  if (to.name === "ssearch") {
    // You need to implement this function, you can use XHR, or library like axios. 
    // You also need to add new endpoint to check cookies on your flask app
    const response = await http.get("http://yourbackend.com/api/auth/check");
    
    // Assuming if the jwt verification failed, it returns 401
    if ( response.status === 401 ) {
      return next({ name: "home" });
    }
  }

  next();
});