How to deal with special character escape issues in URL query parameters in Vue?

Process URL query parameters in Vue for special character escape

In a single sign-on scenario, the URL parameter often contains information such as id and key used for authentication. For example, the URL might be similar to http://localhost:8088/taxbureaulogin?id=1206&key=ze9 ticzsrej... . The browser may escape special characters in it, for example Change to a space, / may also be escaped. Front-end Vue applications need to correctly process these special characters to ensure data integrity.

Usually, we use URLSearchParams to get URL query parameters:

 let searchParams = new URLSearchParams(window.location.search);

However, the parameters obtained by this method may have been browser escaped. For example, ze9 ticzsrejfujj/bxjcq== may become ze9 ticzsrejfujj/bxjcq== .

Solution:

1. Backend processing (recommended): When the backend generates tokens, it is recommended to use base64url encoding to avoid Special characters such as , / and = . This is the ideal solution that can fundamentally solve the problem.

2. Front-end processing (if the back-end cannot be modified): The front-end can use encodeURIComponent to encode the obtained token value and then pass it to the back-end. It should be noted that different versions of Vue Router behave differently:

   • Vue Router 3.x: Vue Router 3.x will automatically decode special characters. The URL information obtained using location.href is also an escaped string. The parameters obtained by URLSearchParams have also been decoded. Therefore, it is necessary to use encodeURIComponent encoding before passing to the backend.

   • Vue Router 4.x: Vue Router 4.x optimizes the processing of URL parameters, and the parameter encoding in the $route attribute is more consistent. The values ​​in path and fullPath are no longer decoded, hash will be decoded. When using push , resolve and replace methods, the path must be encoded.

   The following code demonstrates an example of using encodeURIComponent in Vue Router 3.x:

    let searchParams = new URLSearchParams(window.location.search);
   let key = searchParams.get('key');
   let encodedKey = encodeURIComponent(key); // Pass to the backend after encoding

3. Use the $route attribute (Vue Router 4.x): In Vue Router 4.x, use the $route attribute directly to get parameters without additional encoding.

In summary, it is recommended to prioritize backend processing methods to ensure data integrity and security. If the backend cannot be modified, select the appropriate front-end processing method based on the Vue Router version.

The above is the detailed content of How to deal with special character escape issues in URL query parameters in Vue?. For more information, please follow other related articles on the PHP Chinese website!