Vue server rendering uses vuex to save login status. After refreshing, vuex data is lost and local storage cannot be used in routing guards.

vue server rendering uses vuex to save login status. After refreshing, vuex data is lost, and local storage cannot be used in the routing guard in beforeEach. After using it, report 500 directly, and the pages are gone

.

Code:

  // localstoragelocalstorage500
  router.beforeEach((to, from, next) => {
    if (to.fullPath === "/login" || store.state.user.profile.cas_id) {
      next();
    } else {
      next("login");
    }
  });
Aug.07,2021

localstorage, cannot be used when rendering on the server side. It needs to be detected in the browser before it can be used.

Menu