When doing a project, it is sometimes necessary to save the login state of the user, to keep the user state unchanged when refreshing the page, and to realize the logout function. Here we introduce two ways to realize sessionStorage and VUEX, then what are the advantages and disadvantages of these two ways, and under what circumstances are they used? First of all, sessionStorage is based on sessions and cannot call data across pages. If one page is modified, the other page cannot listen to the modified data. And vuex need some rely on small projects will seem a bit overqualified, so in small applications direct access to the sessionStorage can realize the function of store login state, and this method is much simpler than vuex, but in a large project, Shared between logged in need in many components, the page does not refresh haste, taking The value in vuex will tell you.Copy the code

1. Use session Storage to save user login status

As shown in Figure 1,sessionStorage.setItem is the way to save data. The first parameter is variable name and the second parameter is stored data. In the login page, the login information of the user is returned after successful login.

In Mounted hook function, use sessionStorage.getItem to add data to the next page.

As shown in Figure 3, judge the storage situation of data in sessionStorage in various states of login in main.js, this is biased to business logic, please code according to the needs of the project.

2. Run the session Storage+vuex command to save the user login status

Want to use vuex, of course, the first step is to install vuex, vuex Chinese website has introduced very detailed, vuex.vuejs.org/zh/installa… .

Vuex Directory Structure After vuEX is installed, build a vuex directory to reduce the coupling degree of code and facilitate future modification and maintenance.

store.js

getters.js

mutations.js

Actions.js Then, when the user logs in again, we need to store the user name and token into sessionStorge, which is passed into vuex by sessionStorage.

The landing page is shown in the image above. After a successful login, the above functions are achieved. Vuex’s dispatch and COMMIT methods are different. Put the user name into vuex, call setUser, that is, execute the method in actions.js to change the state, enter the userStatus method in articles.js, and finally realize the change of the three states in store.js. So in fact, here, we have achieved the user state, namely user name and token into the sessionStorage requirements.

The state in VUEX no longer exists once the page is refreshed. Therefore, in order to refresh the page and still display the user profile picture, it is necessary to extract the state from sessionStorage and transfer the value to Vuex.Copy the code

After a user logs in using computed logic, if he returns to the login interface again, he must have logged out. So just add a routing control to main.js.

Login component guard because of the introduction of two kinds of technology to save the user login status, so in order to present the effect of the code has been changed, there are some errors in the variable name, I hope you see the officer forgive!