Web Front-end
JS Tutorial
What should I do if the routing parameters of vue-router are refreshed and disappeared?
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
6 Ways to Refresh Web Pages on iPhone
Feb 05, 2024 pm 02:00 PM
When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa
F5 refresh key not working in Windows 11
Mar 14, 2024 pm 01:01 PM
Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key
How to solve the problem of all desktop icons disappearing in Windows 10
Dec 25, 2023 pm 04:55 PM
I don’t know if you have ever woken up in the morning and turned on the computer and found that all the desktop icons on the computer are gone. Don’t panic at this time. It may be that your shortcut keys have deleted the desktop icons. This can be restored directly in the Recycle Bin. If not, you can also check the method of displaying the icon to recover. Let’s take a look at the specific steps below. Recovery method for all disappeared Win10 desktop icons 1. If there is only one Recycle Bin left on the desktop, then it is possible that you have deleted all the shortcut keys for changing faces. At this time, you can click on the Recycle Bin to see if you can find a shortcut to delete it. 2. If you see the shortcuts you deleted, select all the shortcuts, right-click the mouse and select Restore. 3. You can also right-click the mouse and click Undelete. so all
Win7 wireless network adapter is missing
Dec 23, 2023 pm 05:57 PM
Many users have reported that the win7 wireless network adapter has disappeared. In this case, it is likely that there is a problem with the network card or network card driver. We only need to repair the network card driver or replace a good network card to solve the problem. The wireless network adapter disappeared in win7 1. First, right-click the Start button and select "Device Manager" 2. Then we find the "Network Adapter", right-click and choose to update the driver first, or disable the device first and then enable it. You can also click here "Properties" 3. After clicking Properties, click "Driver" above, click "Update Driver" here 4. Click here and select "Automatically search and update driver files" 5. After completion, you can also change the computer's network Reset it. First, press win
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
C++ function parameter type safety check
Apr 19, 2024 pm 12:00 PM
C++ parameter type safety checking ensures that functions only accept values of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.
i9-12900H parameter evaluation list
Feb 23, 2024 am 09:25 AM
i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores
Java Apache Camel: Building a flexible and efficient service-oriented architecture
Feb 19, 2024 pm 04:12 PM
Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable
