From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 16 Aug 2019 17:46:25 +0000 (+0200)
Subject: feat: allow encoded query keys
X-Git-Tag: v4.0.0-alpha.0~261
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d59f3b592624ebc3a9d840a2f9f73f41b8e0f3f0;p=thirdparty%2Fvuejs%2Frouter.git

feat: allow encoded query keys
---

diff --git a/__tests__/url-encoding.spec.js b/__tests__/url-encoding.spec.js
index f97b767e..a4720823 100644
--- a/__tests__/url-encoding.spec.js
+++ b/__tests__/url-encoding.spec.js
@@ -101,6 +101,22 @@ describe('URL Encoding', () => {
       )
     })
 
+    it('decodes params keys in query', async () => {
+      const history = createHistory('/?%E2%82%AC=euro')
+      const router = new Router({ history, routes })
+      await router.doInitialNavigation()
+      expect(router.currentRoute).toEqual(
+        expect.objectContaining({
+          name: 'home',
+          fullPath: '/?' + encodeURIComponent('€') + '=euro',
+          query: {
+            '€': 'euro',
+          },
+          path: '/',
+        })
+      )
+    })
+
     it('allow unencoded params in query (IE Edge)', async () => {
       const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
       const history = createHistory('/?q=€%notvalid')
diff --git a/explorations/html5.html b/explorations/html5.html
index 8dbf5b9b..18d096bc 100644
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -53,8 +53,9 @@
           >
         </li>
         <li>
-          <router-link :to="{ name: 'home', query: { currency: '€uro' }}"
-            >/currency=€uro (object)</router-link
+          <router-link
+            :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
+            >/currency=€uro&é=e (object)</router-link
           >
         </li>
         <li>
diff --git a/src/history/utils.ts b/src/history/utils.ts
index cde856d7..0e497c8d 100644
--- a/src/history/utils.ts
+++ b/src/history/utils.ts
@@ -60,12 +60,20 @@ export function parseQuery(search: string): HistoryQuery {
   const searchParams = (hasLeadingIM ? search.slice(1) : search).split('&')
   for (let i = 0; i < searchParams.length; ++i) {
     let [key, value] = searchParams[i].split('=')
+    try {
+      key = decodeURIComponent(key)
+    } catch (err) {
+      // TODO: handling only URIError?
+      console.warn(
+        `[vue-router] error decoding query key "${value}" while parsing query. Sticking to the original key.`
+      )
+    }
     try {
       value = decodeURIComponent(value)
     } catch (err) {
       // TODO: handling only URIError?
       console.warn(
-        `[vue-router] error decoding "${value}" while parsing query. Sticking to the original value.`
+        `[vue-router] error decoding query value "${value}" while parsing query. Sticking to the original value.`
       )
     }
     if (key in query) {
@@ -108,6 +116,17 @@ export function stringifyQuery(query: RawHistoryQuery): string {
       search += key
       continue
     }
+    let encodedKey: string = key
+    try {
+      encodedKey = encodeURIComponent(key)
+    } catch (err) {
+      // TODO: handling only URIError?
+      // TODO: refactor all encoded handling in a custom function
+
+      console.warn(
+        `[vue-router] invalid query parameter while stringifying query: "${key}": "${value}"`
+      )
+    }
 
     let values: string[] = Array.isArray(value) ? value : [value]
     try {
@@ -119,9 +138,9 @@ export function stringifyQuery(query: RawHistoryQuery): string {
         `[vue-router] invalid query parameter while stringifying query: "${key}": "${values}"`
       )
     }
-    search += `${key}=${values[0]}`
+    search += `${encodedKey}=${values[0]}`
     for (let i = 1; i < values.length; i++) {
-      search += `&${key}=${values[i]}`
+      search += `&${encodedKey}=${values[i]}`
     }
   }