Vue/Vuex - how to stay logged in as a user after route change

Question

As a small Dev-Team, we are about to create our own social media website just for fun.

Our login process is handled with a jwt which is stored in localStorage.

  async login( { commit }, user) {
    commit('auth_request');

    try {
      const res = await axios.post('http://localhost:3000/api/v1/users/login', user);
      if (res.data.status === 'success') {
        const token = res.data.token;
        const user = res.data.user;
        localStorage.setItem('jwt', token);
        commit('auth_success', { token, user }  );
        toast.success(res.data.message);
        router.push({ path: '/' })
      }
      return res;
    } catch (error) {
      commit('set_errors', error.response.data)
      toast.error(error.response.data.message);
    }
  },

However as soon as we change route we getting logged out.

router.beforeEach((to, from, next) => {
  // check for user is logged in on route change
  next();
})

How to prevent getting logged out on route change or page reload?

Answer 1

Well you are committing the token and it is saved in your localstorage so you can try this way so that your router knows that you are authenticated

This is a example router

path: "/dashboard",
name: "dashboard",
meta: { requiresAuth: true },
component: () => import("../views/Dashboard.vue")

I have a meta with requiresAuth: true so you can go to your router.beforeEach and create a if statement to check if there is a token if there is a token then stay logged in if not when trying to get into the Dashboard page take me to the login page.

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (window.localStorage.getItem("jwt")) {
      next();
    } else {
      next({ name: "login" });
    }
  }else{
    next()
  }
});

We are doing a if stament where we get the token with window.localStorage.getItem("jwt") if there is a token in the localstorage then we can tell our router to stay logged in and navigate to the pages that has meta: { requiresAuth: true } if we dont have the token in localstorage take us to login page

I hope this helps you out or gives you an idea how to guard your routes. If you haven't solved the problem then just comment on the answer so we can solve the problem.