What should I do if the routing parameters of vue-router are refreshed and disappeared?

Scenario: Single-page application implemented by vue-router. After the login page calls the login interface, the server returns the user information and then passes it to the homepage component through router.push({name: 'index', params: res.data}) , and display the data on the home page. 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 user information corresponding to session, then render the homepage data, pass the sessionid to the browser through the response header and generate 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 be saved in the url, Like this: "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", and then call 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 cookies are strings and linked with "=", 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(';')
    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.
LocalStorage has no time limit for storing 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 pointed directly 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 I adopted was to use sessionStorage to store data. If you have a better solution, please feel free to enlighten me~

The above is the detailed content of What should I do if the routing parameters of vue-router are refreshed and disappeared?. For more information, please follow other related articles on the PHP Chinese website!