Solution to the problem of vue router routing parameters disappearing after refreshing

This article mainly introduces vue-routerRouting parametersThe problem of refreshing and disappearing

Scenario: Single page application implemented by vue-router, login page call After logging in to the interface, the server returns the user information, and then passes it to the homepage component through router.push({name: 'index', params: res.data}), and displays the data on the homepage. But after refreshing the page, the data disappeared.

Solution:

1, session&Server rendering

The traditional solution is, The login page and the homepage are two separate pages. After successful login, the server generates a session corresponding to the user information, then renders the homepage data, and passes the sessionid to the browser through the response header and generates the corresponding cookie file. In this way, the next time the page is requested, the browser will bring the corresponding cookie in the http header, and then the server will determine whether the user is logged in based on the sessionid in the cookie, and then display the user data.

If the project adopts the idea of ​​front-end and back-end separation, and the server only provides interfaces and does not perform server rendering, then this method will not work.

2. $route.query

We can bring the login request parameters when routing:

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
 url: 'xxx',
 method: 'post',
 data: {
 username: this.$route.query.username,
 password: this.$route.query.password
 }
})

In this way, the login parameters will It is saved in the URL, like this: "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", and then calls the login interface in the created hook to return the data.

Even if the password is md5 encrypted, it is definitely unreasonable to put sensitive information such as username and password in the URL.

3. Cookie

Another way is to store the login parameters in the cookie, then obtain the information stored in the cookie in the created hook, and then call the login interface. It is also unreasonable to store the user name and password in a cookie. The improved version is that the server returns a token after successful login, and the user data is obtained through the token within the validity period.

Cookie data access is more troublesome, because the key-value pairs in the cookie are strings and are linked by "=", and additional methods for operating cookies need to be written.

<script>
 function setCookie (name, value, exdays) {
 let date = new Date()
 date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
 let expires = "expires=" + date.toGMTString()
 document.cookie = name + "=" + value + "; " + expires
 }
 function getCookie (name) {
 name = name + "="
 let cookieArr = document.cookie.split(&#39;;&#39;)
 for (let i = 0; i < cookieArr.length; i++) {
  let cookie = cookieArr[i].trim()
  if (cookie.indexOf(name) === 0) {
  return cookie.slice(name.length)
  }
 }
 return ""
 }

4. HTML5 Web Storage

When it comes to Web storage, I must subconsciously think that many browsers do not support it. In fact, IE8 and above support localStorage and sessionStorage. The Vue project supports at least IE9, so you can use web storage with confidence.

There is no time limit for localStorage to store data, and it will not become invalid unless it is actively deleted. SessionStorage will become invalid when the page or browser is closed, which is suitable for this scenario.

We can store the token information in sessionStorage, and then request data through the token every time the page is refreshed; but since the token can be stored locally, why not just save commonly used data directly to the local? Utilizing local data can reduce client network requests and reduce server load.

Since localStorage and sessionStorage are read-only, they cannot be directly pointed to an object. You cannot use Object.assign() to copy the object, because the value will become the string "[object Object]", so you can only add attributes to sessionStorage through looping.

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

The above are the problems I encountered in my recent work. The final solution was to use sessionStorage to store data. If you have a better solution, please feel free to enlighten me.

That’s it. All the content, I hope it will be helpful to everyone's study, and I also hope everyone will support Script Home.

The above is the detailed content of Solution to the problem of vue router routing parameters disappearing after refreshing. For more information, please follow other related articles on the PHP Chinese website!