Refresh the page vuex data does not disappear and the page does not jump problem (detailed tutorial)

This article mainly introduces the detailed explanation of how to prevent the vuex data from disappearing and not jumping to the page when refreshing the page. Now I share it with you and give it as a reference.

Let me talk about something first

I have been tinkering with vuex and routing interception for a while, and finally got out of it. I am here to share it. First of all, I will state that there is nothing. Basic introduction, using the login state storage sessionStorage method!!!

Get to the point

Refresh

Refresh quite Unlike restarting the project, the data previously obtained is only temporarily stored through the store and disappears when the project is closed. This is a bit like restarting the computer and the data stored in RAM will disappear. But the content stored in sessionstorage, localstorage and cookies will not disappear.

Vuex

Method ideas

First of all Familiar with vuex, the official website introduces that Vuex is a state management model specially developed for Vue.js applications. That is to say, the data in the store in vuex are temporary and are some variables. When the page is refreshed and reloaded, everything will be cleared. , and there has been no second login in the page, the vuex has always been empty, so several methods have been derived

1. Because sessionstorage (the page will disappear when closing the page), localstorage and cookie refresh the page The data will not disappear, so you can store all the requested data in it and retrieve it when you use it

2. Use the vuex plug-in

3. When logging in, put the token and login status (Customized) Assign a value to sessionstorage. When the page is refreshed (route jump), the token and login status are obtained from sessionstorage and assigned to the store, and the data of the relevant page will be re-requested.

After thinking about it, I I chose method 3, but this method needs to be combined with routing interception. After the routing is completed, post the code

code

index

# #actions

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

Routing

Brief introduction: Route interception is equivalent to the 'life cycle' of the route. Insert a method at different time periods of the route. You can here What do you want to do during the time period? This time you only do things before the route jumps, so just use router.beforeEach((to, from, next) => { // ... }). The specific content is official website Very detailed

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

pit

1. I wrote the route interception in the main.js file, so be careful It should be written above the vue mount (new Vue)

2. When clicking login, the login method in actions must be earlier than the route interception
3. Don’t forget to delete the variables in sessionStorage when logging out.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to call json using js

Use gm to crop the synthesized image under Nodejs

How to use babel installation and configuration tutorial

The above is the detailed content of Refresh the page vuex data does not disappear and the page does not jump problem (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!