Detailed explanation of the solution to the problem of vue-router routing parameter refresh and disappearance

This article mainly introduces the solution to the problem of vue-routerrouting parametersrefreshing and disappearing. It has a certain reference value. Interested friends can refer to the

scenario: In the single-page application implemented by vue-router, after the login page calls Login interface, the server returns the user information and then passes it to the homepage through router.push({name: 'index', params: res.data}) component and display data on the homepage. But after refreshing the page, the data disappeared.

Solution:

1, session&Server rendering

The traditional solution is that 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
 }
})

The login parameters will be saved in the URL, like this: "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", and then the login interface is called 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, and then obtain the information stored in the cookie in the created hook. 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 do 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.

The above is the detailed content of Detailed explanation of the solution to the problem of vue-router routing parameter refresh and disappearance. For more information, please follow other related articles on the PHP Chinese website!