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:
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.
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.
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.