Scenario: A 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 ({name: 'index', params: }) and displays the data on the homepage. But after refreshing the page, the data disappears.
Solution:
1. Session&Server Rendering
The traditional solution is that the login page and the home page are two separate pages. After the login is successful, the server generates the session corresponding to the user information, then renders the home page 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 separation, and the server only provides interfaces and does not perform server rendering, then this method will not work.
2、$
We can bring the parameters of the login request when the route is redirected:
({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
url: 'xxx',
method: 'post',
data: {
username: this.$,
password: this.$
}
})
In this way, the login parameters will be saved in the url, like this: "/index?username=xxx&password=xxxxxx", and then call the login interface in the created hook to return the data.
Even if the password is encrypted with md5, it is definitely unreasonable to place sensitive information such as username and password in the URL.
3、cookie
Another way is to store the login parameters into 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 username and password in the cookie. The improved version is that the server returns a token after logging in successfully, and obtains user data through the token during the valid period.
Cookies access data is more troublesome, because the key-value pairs in cookies are strings and linked with "=", which requires additional write methods to operate cookies.
<script>
function setCookie (name, value, exdays) {
let date = new Date()
(() + (exdays * 24 * 60 * 60 * 1000))
let expires = "expires=" + ()
= name + "=" + value + "; " + expires
}
function getCookie (name) {
name = name + "="
let cookieArr = (';')
for (let i = 0; i < ; i++) {
let cookie = cookieArr[i].trim()
if ((name) === 0) {
return ()
}
}
return ""
}
4. HTML5 Web Storage
When it comes to web storage, the subconscious mind definitely thinks that many browsers do not support it. In fact, IE8 and above support localStorage and sessionStorage. The Vue project supports IE9 at the lowest level, so you can use web storage with confidence.
There is no time limit for localStorage to store data, and it will not be invalid if it is not actively deleted. SessionStorage will become invalid when the page or browser is closed, and is suitable for this scenario application.
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 directly save the commonly used data to the local area? Using local data can reduce client network requests and also reduce server burden.
Since localStorage and sessionStorage are read-only, they cannot be directly pointed to an object. You cannot use() to copy objects, because the value will become the string "[object Object]", and all you can only add attributes to sessionStorage through a loop.
...
for (var key in ) {
sessionStorage[key] = [key]
}
...
The above is the problem I encountered in my recent work, and the final solution is to use sessionStorage to store data.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.