javascript - Vuex sore lost when manually navigate vue-router route

Question

ONLY ON SAFARI BROWSER. When I manually write the url on navigation bar after logged in, ex: "http://x.x.x.x:8080/gestione", the browser loses the vuex store state (so does the gest_user module with the currentUser) and redirect to login component, I'M USING VUEX-PERSISTEDSTATE:

routes:

const routes = [
  {
    id: "login",
    path: "/login",
    name: "login",
    component: Login,
    meta: {
      ...meta.default
    }
  },
  {
    id: "home",
    path: "/",
    name: "homeriluser",
    component: HomeUtente,
    meta: {
      ...meta.public, authorize: [Role.user, Role.admin]
    },
  },
    {
      id: "gestione",
        path: "/gestione",
        name: "gestrilevazioni",
        component: GestRils,
        meta: {
            ...meta.admin, authorize: [Role.admin]
        }
    },
  {
    path: "/modifica",
    name: "modificaril",
    component: EditRil,
    meta: {
      ...meta.public, authorize: [Role.user, Role.admin]
    }
  },
  {
    path: "*",
    name: "page404",
    component: Pagenotfound,
    meta: {
      ...meta.public
    }
  }
];

my router:

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from "./router";
import store from "@/store/index"

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: "history"
});

router.beforeEach(async (to, from, next) => {
  
  // redirect to login page if not logged in and trying to access a restricted page
  const { auth } = to.meta;
  const { authorize } = to.meta;
  const currentUser = store.state.gest_user;
  
  if (auth) {
    if (!currentUser.username) {
      // not logged in so redirect to login page with the return url
      return next({ path: '/login', query: { returnUrl: to.path } });
    }
    
    // check if route is restricted by role
    if (authorize && authorize.length && !authorize.includes(currentUser.roles)) {
      // role not authorised so redirect to home page
      return next({ path: '/' });
    }
  }
  next();
});

export default router;

my store:

import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);
Vue.prototype.$http = axios;
Vue.prototype.axios = axios;

const debug = process.env.NODE_ENV !== "production";

const customPersist = createPersistedState({
  paths: ["gest_user", "gest_rilevazione.rilevazione"],
  storage: {
    getItem: key => sessionStorage.getItem(key),
    setItem: (key, value) => {
      sessionStorage.setItem(key, value)
    },
    removeItem: key => sessionStorage.removeItem(key)
  }
});

const store =  new Vuex.Store({
  modules: {
    pubblico: pubblico,
    amministrazione: amministrazione,
    loading_console: loading_console,
    login_console: login_console,
    gest_itemconc: gest_itemconc,
    gest_rilslave: gest_rilslave,
    gest_rilmaster: gest_rilmaster,
    sidebar_console: sidebar_console,
    gest_user: gest_user,
    gest_newril: gest_newril,
    gest_rilevazione: gest_rilevazione
  },
  plugins: [customPersist],
  strict: debug
});

export default store;

Can anyone tell me why this happens?

question from:https://stackoverflow.com/questions/65866023/vuex-sore-lost-when-manually-navigate-vue-router-route

Answer 1

You are probably using browser's local storage to persist data. Could you check if local storage is enabled in your Safari browser?