fix: normalize routes and decode resolved query (#8430)

2025-02-19 15:10:58 +00:00 · 2020-12-06 18:32:39 +01:00 · 2020-12-06 18:32:39 +01:00 · fc51ca3330
commit fc51ca3330
parent e9f380c9e6
20 changed files with 214 additions and 147 deletions
--- a/packages/config/package.json
+++ b/packages/config/package.json
@ -10,6 +10,7 @@
    "index.d.ts"
  ],
  "dependencies": {
+    "@nuxt/ufo": "^0.0.3",
    "@nuxt/utils": "2.14.9",
    "consola": "^2.15.0",
    "create-require": "^1.1.1",
--- a/packages/config/src/options.js
+++ b/packages/config/src/options.js
@ -7,6 +7,7 @@ import uniq from 'lodash/uniq'
 import consola from 'consola'
 import destr from 'destr'
 import { TARGETS, MODES, guardDir, isNonEmptyString, isPureObject, isUrl, getMainModule, urlJoin, getPKG } from '@nuxt/utils'
+import { normalizeURL } from '@nuxt/ufo'
 import { defaultNuxtConfigFile, getDefaultNuxtConfig } from './config'

 export function getNuxtConfig (_options) {
@ -126,7 +127,7 @@ export function getNuxtConfig (_options) {
  if (!/\/$/.test(options.router.base)) {
    options.router.base += '/'
  }
-  options.router.base = encodeURI(decodeURI(options.router.base))
+  options.router.base = normalizeURL(options.router.base)

  // Legacy support for export
  if (options.export) {
--- a/packages/server/src/server.js
+++ b/packages/server/src/server.js
@ -162,12 +162,16 @@ export default class Server {
    }))

    // DX: redirect if router.base in development
-    if (this.options.dev && this.nuxt.options.router.base !== '/') {
+    const routerBase = this.nuxt.options.router.base
+    if (this.options.dev && routerBase !== '/') {
      this.useMiddleware({
        prefix: false,
-        handler: (req, res) => {
-          const to = urlJoin(this.nuxt.options.router.base, req.url)
-          consola.info(`[Development] Redirecting from \`${decodeURI(req.url)}\` to \`${decodeURI(to)}\` (router.base specified).`)
+        handler: (req, res, next) => {
+          if (decodeURI(req.url).startsWith(decodeURI(routerBase))) {
+            return next()
+          }
+          const to = urlJoin(routerBase, req.url)
+          consola.info(`[Development] Redirecting from \`${decodeURI(req.url)}\` to \`${decodeURI(to)}\` (router.base specified)`)
          res.writeHead(302, {
            Location: to
          })
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -8,6 +8,7 @@
    "dist"
  ],
  "dependencies": {
+    "@nuxt/ufo": "^0.0.3",
    "consola": "^2.15.0",
    "fs-extra": "^8.1.0",
    "hash-sum": "^2.0.0",
--- a/packages/utils/src/route.js
+++ b/packages/utils/src/route.js
@ -1,7 +1,7 @@
 import path from 'path'
 import get from 'lodash/get'
 import consola from 'consola'
-
+import { normalizeURL } from '@nuxt/ufo'
 import { r } from './resolve'

 const routeChildren = function (route) {
@ -201,10 +201,8 @@ export const createRoutes = function createRoutes ({
      } else if (key === 'index' && i + 1 === keys.length) {
        route.path += i > 0 ? '' : '/'
      } else {
-        const isDynamic = key.startsWith('_')
-        route.path += '/' + getRoutePathExtension(isDynamic ? key : encodeURIComponent(decodeURIComponent(key)))
-
-        if (isDynamic && key.length > 1) {
+        route.path += normalizeURL(getRoutePathExtension(key))
+        if (key.startsWith('_') && key.length > 1) {
          route.path += '?'
        }
      }
--- a/packages/vue-app/package.json
+++ b/packages/vue-app/package.json
@ -13,6 +13,7 @@
    "index.d.ts"
  ],
  "dependencies": {
+    "@nuxt/ufo": "^0.0.3",
    "node-fetch": "^2.6.1",
    "unfetch": "^4.2.0",
    "vue": "^2.6.12",
--- a/packages/vue-app/template/router.js
+++ b/packages/vue-app/template/router.js
@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { normalizeURL } from '@nuxt/ufo'
 import { interopDefault } from './utils'<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
 import scrollBehavior from './router.scrollBehavior.js'

@ -105,16 +106,27 @@ export const routerOptions = {
  fallback: <%= router.fallback %>
 }

+function decodeObj(obj) {
+  for (const key in obj) {
+    if (typeof obj[key] === 'string') {
+      obj[key] = decodeURIComponent(obj[key])
+    }
+  }
+}
+
 export function createRouter () {
  const router = new Router(routerOptions)
-  const resolve = router.resolve.bind(router)

-  // encodeURI(decodeURI()) ~> support both encoded and non-encoded urls
+  const resolve = router.resolve.bind(router)
  router.resolve = (to, current, append) => {
    if (typeof to === 'string') {
-      to = encodeURI(decodeURI(to))
+      to = normalizeURL(to)
    }
-    return resolve(to, current, append)
+    const r = resolve(to, current, append)
+    if (r && r.resolved && r.resolved.query) {
+      decodeObj(r.resolved.query)
+    }
+    return r
  }

  return router
--- a/packages/vue-app/template/server.js
+++ b/packages/vue-app/template/server.js
@ -1,5 +1,6 @@
 import { stringify } from 'querystring'
 import Vue from 'vue'
+import { normalizeURL } from '@nuxt/ufo'
 <% if (fetch.server) { %>import fetch from 'node-fetch'<% } %>
 <% if (features.middleware) { %>import middleware from './middleware.js'<% } %>
 import {
@ -50,12 +51,12 @@ const createNext = ssrContext => (opts) => {
    opts.path = urlJoin(routerBase, opts.path)
  }
  // Avoid loop redirect
-  if (encodeURI(decodeURI(opts.path)) === ssrContext.url) {
+  if (decodeURI(opts.path) === decodeURI(ssrContext.url)) {
    ssrContext.redirected = false
    return
  }
  ssrContext.res.writeHead(opts.status, {
-    Location: opts.path
+    Location: normalizeURL(opts.path)
  })
  ssrContext.res.end()
 }
--- a/packages/vue-app/template/utils.js
+++ b/packages/vue-app/template/utils.js
@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { normalizeURL } from '@nuxt/ufo'

 // window.{{globals.loadedCallback}} hook
 // Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
@ -309,7 +310,7 @@ export function getLocation (base, mode) {

  const fullPath = (path || '/') + window.location.search + window.location.hash

-  return encodeURI(fullPath)
+  return normalizeURL(fullPath)
 }

 // Imported from path-to-regexp
@ -692,3 +693,4 @@ export function setScrollRestoration (newVal) {
    window.history.scrollRestoration = newVal;
  } catch(e) {}
 }
+
--- a/packages/vue-renderer/src/renderer.js
+++ b/packages/vue-renderer/src/renderer.js
@ -3,6 +3,7 @@ import fs from 'fs-extra'
 import consola from 'consola'
 import template from 'lodash/template'
 import { TARGETS, isModernRequest, waitFor } from '@nuxt/utils'
+import { normalizeURL } from '@nuxt/ufo'

 import SPARenderer from './renderers/spa'
 import SSRRenderer from './renderers/ssr'
@ -274,7 +275,7 @@ export default class VueRenderer {
    consola.debug(`Rendering url ${url}`)

    // Add url to the renderContext
-    renderContext.url = encodeURI(decodeURI(url))
+    renderContext.url = normalizeURL(url)

    // Add target to the renderContext
    renderContext.target = this.options.target
--- a/packages/webpack/src/config/base.js
+++ b/packages/webpack/src/config/base.js
@ -73,6 +73,7 @@ export default class WebpackBaseConfig {
    return [
      /\.vue\.js/i, // include SFCs in node_modules
      /consola\/src/,
+      /@nuxt[/\\]ufo/, // exports modern syntax for browser field
      ...this.normalizeTranspile({ pathNormalize: true })
    ]
  }
--- a/test/dev/async-config.size-limit.test.js
+++ b/test/dev/async-config.size-limit.test.js
@ -20,7 +20,7 @@ describe('nuxt basic resources size limit', () => {
  it('should stay within the size limit range in legacy mode', async () => {
    const legacyResourcesSize = await getResourcesSize(distDir, 'client', { gzip: true, brotli: true })

-    const LEGACY_JS_RESOURCES_KB_SIZE = 200
+    const LEGACY_JS_RESOURCES_KB_SIZE = 201
    expect(legacyResourcesSize.uncompressed).toBeWithinSize(LEGACY_JS_RESOURCES_KB_SIZE)

    const LEGACY_JS_RESOURCES_GZIP_KB_SIZE = 70
--- a/test/dev/dynamic-routes.test.js
+++ b/test/dev/dynamic-routes.test.js
@ -5,98 +5,86 @@ import { promisify } from 'util'
 const readFile = promisify(fs.readFile)

 describe('dynamic routes', () => {
-  test('Check .nuxt/router.js', () => {
-    return readFile(
-      resolve(__dirname, '..', 'fixtures/dynamic-routes/.nuxt/router.js'),
-      'utf-8'
-    ).then((routerFile) => {
-      routerFile = routerFile
-        .slice(routerFile.indexOf('routes: ['))
-        .replace('routes: [', '[')
-        .replace(/ _[0-9A-Za-z]+,/g, ' "",')
-      routerFile = routerFile.substr(
-        routerFile.indexOf('['),
-        routerFile.lastIndexOf(']') + 1
-      )
-      const routes = eval('( ' + routerFile + ')') // eslint-disable-line no-eval
-      // pages/test/index.vue
-      expect(routes[0].path).toBe('/parent')
-      expect(routes[0].name).toBeFalsy() // parent route has no name
-      // pages/parent/*.vue
-      expect(routes[0].children.length).toBe(3) // parent has 3 children
-      expect(routes[0].children.map(r => r.path)).toEqual(['', 'child', 'teub'])
-      expect(routes[0].children.map(r => r.name)).toEqual([
-        'parent',
-        'parent-child',
-        'parent-teub'
-      ])
-      // pages/posts.vue
-      expect(routes[1].path).toBe('/posts')
-      expect(routes[1].name).toBe('posts')
-      expect(routes[1].children.length).toBe(1)
-      // pages/posts/_id.vue
-      expect(routes[1].children[0].path).toBe(':id?')
-      expect(routes[1].children[0].name).toBe('posts-id')
-      // pages/parent.vue
-      expect(routes[2].path).toBe('/test')
-      expect(routes[2].name).toBe('test')
-      // pages/test/projects/index.vue
-      expect(routes[3].path).toBe('/test/projects')
-      expect(routes[3].name).toBe('test-projects')
-      // pages/test/users.vue
-      expect(routes[4].path).toBe('/test/users')
-      expect(routes[4].name).toBeFalsy() // parent route has no name
-      // pages/test/users/*.vue
-      expect(routes[4].children.length).toBe(5) // parent has 5 children
-      expect(routes[4].children.map(r => r.path)).toEqual([
-        '',
-        'projects',
-        'projects/:category',
-        ':id',
-        ':index/teub'
-      ])
-      expect(routes[4].children.map(r => r.name)).toEqual([
-        'test-users',
-        'test-users-projects',
-        'test-users-projects-category',
-        'test-users-id',
-        'test-users-index-teub'
-      ])
-      // pages/test/songs/toto.vue
-      expect(routes[5].path).toBe('/test/songs/toto')
-      expect(routes[5].name).toBe('test-songs-toto')
-      // pages/test/projects/_category.vue
-      expect(routes[6].path).toBe('/test/projects/:category')
-      expect(routes[6].name).toBe('test-projects-category')
-      // pages/test/songs/_id.vue
-      expect(routes[7].path).toBe('/test/songs/:id?')
-      expect(routes[7].name).toBe('test-songs-id')
-      // pages/users/_id.vue
-      expect(routes[8].path).toBe('/users/:id?')
-      expect(routes[8].name).toBe('users-id')
-      // pages/test/_.vue
-      expect(routes[9].path).toBe('/test/*')
-      expect(routes[9].name).toBe('test-all')
+  test('Check .nuxt/routes.json', async () => {
+    const routesFile = await readFile(resolve(__dirname, '..', 'fixtures/dynamic-routes/.nuxt/routes.json'), 'utf-8')
+    const routes = JSON.parse(routesFile)
+    // pages/test/index.vue
+    expect(routes[0].path).toBe('/parent')
+    expect(routes[0].name).toBeFalsy() // parent route has no name
+    // pages/parent/*.vue
+    expect(routes[0].children.length).toBe(3) // parent has 3 children
+    expect(routes[0].children.map(r => r.path)).toEqual(['', 'child', 'teub'])
+    expect(routes[0].children.map(r => r.name)).toEqual([
+      'parent',
+      'parent-child',
+      'parent-teub'
+    ])
+    // pages/posts.vue
+    expect(routes[1].path).toBe('/posts')
+    expect(routes[1].name).toBe('posts')
+    expect(routes[1].children.length).toBe(1)
+    // pages/posts/_id.vue
+    expect(routes[1].children[0].path).toBe(':id?')
+    expect(routes[1].children[0].name).toBe('posts-id')
+    // pages/parent.vue
+    expect(routes[2].path).toBe('/test')
+    expect(routes[2].name).toBe('test')
+    // pages/test/projects/index.vue
+    expect(routes[3].path).toBe('/test/projects')
+    expect(routes[3].name).toBe('test-projects')
+    // pages/test/users.vue
+    expect(routes[4].path).toBe('/test/users')
+    expect(routes[4].name).toBeFalsy() // parent route has no name
+    // pages/test/users/*.vue
+    expect(routes[4].children.length).toBe(5) // parent has 5 children
+    expect(routes[4].children.map(r => r.path)).toEqual([
+      '',
+      'projects',
+      'projects/:category',
+      ':id',
+      ':index/teub'
+    ])
+    expect(routes[4].children.map(r => r.name)).toEqual([
+      'test-users',
+      'test-users-projects',
+      'test-users-projects-category',
+      'test-users-id',
+      'test-users-index-teub'
+    ])
+    // pages/test/songs/toto.vue
+    expect(routes[5].path).toBe('/test/songs/toto')
+    expect(routes[5].name).toBe('test-songs-toto')
+    // pages/test/projects/_category.vue
+    expect(routes[6].path).toBe('/test/projects/:category')
+    expect(routes[6].name).toBe('test-projects-category')
+    // pages/test/songs/_id.vue
+    expect(routes[7].path).toBe('/test/songs/:id?')
+    expect(routes[7].name).toBe('test-songs-id')
+    // pages/users/_id.vue
+    expect(routes[8].path).toBe('/users/:id?')
+    expect(routes[8].name).toBe('users-id')
+    // pages/test/_.vue
+    expect(routes[9].path).toBe('/test/*')
+    expect(routes[9].name).toBe('test-all')

-      // pages/index.vue
-      expect(routes[10].path).toBe('/')
-      expect(routes[10].name).toBe('index')
+    // pages/index.vue
+    expect(routes[10].path).toBe('/')
+    expect(routes[10].name).toBe('index')

-      // pages/_slug.vue
-      expect(routes[11].path).toBe('/:slug')
-      expect(routes[11].name).toBe('slug')
-      // pages/_key/_id.vue
-      expect(routes[12].path).toBe('/:key/:id?')
-      expect(routes[12].name).toBe('key-id')
-      // pages/_.vue
-      expect(routes[13].path).toBe('/*/p/*')
-      expect(routes[13].name).toBe('all-p-all')
-      // pages/_/_.vue
-      expect(routes[14].path).toBe('/*/*')
-      expect(routes[14].name).toBe('all-all')
-      // pages/_.vue
-      expect(routes[15].path).toBe('/*')
-      expect(routes[15].name).toBe('all')
-    })
+    // pages/_slug.vue
+    expect(routes[11].path).toBe('/:slug')
+    expect(routes[11].name).toBe('slug')
+    // pages/_key/_id.vue
+    expect(routes[12].path).toBe('/:key/:id?')
+    expect(routes[12].name).toBe('key-id')
+    // pages/_.vue
+    expect(routes[13].path).toBe('/*/p/*')
+    expect(routes[13].name).toBe('all-p-all')
+    // pages/_/_.vue
+    expect(routes[14].path).toBe('/*/*')
+    expect(routes[14].name).toBe('all-all')
+    // pages/_.vue
+    expect(routes[15].path).toBe('/*')
+    expect(routes[15].name).toBe('all')
  })
 })
--- a/test/dev/encoding.test.js
+++ b/test/dev/encoding.test.js
@ -21,6 +21,18 @@ describe('encoding', () => {
    expect(response).toContain('Unicode base works!')
  })

+  test('/ö/dynamic?q=food,coffee (encodeURIComponent)', async () => {
+    const { body: response } = await rp(url('/ö/dynamic?q=food%252Ccoffee'))
+
+    expect(response).toContain('food,coffee')
+  })
+
+  test('/ö/@about', async () => {
+    const { body: response } = await rp(url('/ö/@about'))
+
+    expect(response).toContain('About')
+  })
+
  // Close server and ask nuxt to stop listening to file changes
  afterAll(async () => {
    await nuxt.close()
--- a/test/dev/route-name-splitter.test.js
+++ b/test/dev/route-name-splitter.test.js
@ -5,29 +5,16 @@ import { promisify } from 'util'
 const readFile = promisify(fs.readFile)

 describe('route-name-splitter', () => {
-  test('Check routes names', () => {
-    return readFile(
-      resolve(__dirname, '..', 'fixtures/route-name-splitter/.nuxt/router.js'),
-      'utf-8'
-    ).then((routerFile) => {
-      routerFile = routerFile
-        .slice(routerFile.indexOf('routes: ['))
-        .replace('routes: [', '[')
-        .replace(/ _[0-9A-Za-z]+,/g, ' "",')
-      routerFile = routerFile.substr(
-        routerFile.indexOf('['),
-        routerFile.lastIndexOf(']') + 1
-      )
-      const routes = eval('( ' + routerFile + ')') // eslint-disable-line no-eval
-
-      expect(routes[0].name).toBe('parent')
-      expect(routes[1].name).toBe('posts')
-      expect(routes[1].children[0].name).toBe('posts/id')
-      expect(routes[2].name).toBe('parent/child')
-      expect(routes[3].name).toBe('index')
-      expect(routes[4].name).toBe('all/p/all')
-      expect(routes[5].name).toBe('all/all')
-      expect(routes[6].name).toBe('all')
-    })
+  test('Check routes names', async () => {
+    const routesFile = await readFile(resolve(__dirname, '..', 'fixtures/route-name-splitter/.nuxt/routes.json'), 'utf-8')
+    const routes = JSON.parse(routesFile)
+    expect(routes[0].name).toBe('parent')
+    expect(routes[1].name).toBe('posts')
+    expect(routes[1].children[0].name).toBe('posts/id')
+    expect(routes[2].name).toBe('parent/child')
+    expect(routes[3].name).toBe('index')
+    expect(routes[4].name).toBe('all/p/all')
+    expect(routes[5].name).toBe('all/all')
+    expect(routes[6].name).toBe('all')
  })
 })
--- a/test/fixtures/encoding/layouts/default.vue
+++ b/test/fixtures/encoding/layouts/default.vue
@ -1,24 +1,41 @@
 <template>
  <div>
    <div>
-      <NLink to="/тест">
-        /тест
-      </NLink>
-      <NLink :to="encodeURI('/тест')">
-        /тест (encoded)
-      </NLink>
-      <br>
-      <NLink to="/тест?spa">
-        /тест (SPA)
-      </NLink>
-      <NLink :to="encodeURI('/тест?spa')">
-        /тест (SPA encoded)
-      </NLink>
+      <ul>
+        <li v-for="link in links" :key="link">
+          <NLink :to="link">
+            {{ link }}
+          </NLink>
+          <NLink :to="link.includes('?') ? link.replace('?', '?spa&') : (link + '?spa')">
+            (spa)
+          </NLink>
+          <a :href="encodeURI('/ö') + link">(direct)</a>
+        </li>
+      </ul>
    </div>
    <Nuxt />
  </div>
 </template>

+<script>
+export default {
+  computed: {
+    links () {
+      return [
+        '/redirect',
+        '/@about',
+        '/тест',
+        encodeURI('/тест'),
+        '/dynamic/سلام چطوری?q=cofee,food,دسر',
+        encodeURI('/dynamic/سلام چطوری?q=cofee,food,دسر'),
+        // Using encodeURIComponent on each segment
+        '/dynamic/%D8%B3%D9%84%D8%A7%D9%85%20%DA%86%D8%B7%D9%88%D8%B1%DB%8C?q=cofee%2Cfood%2C%D8%AF%D8%B3%D8%B1'
+      ]
+    }
+  }
+}
+</script>
+
 <style scoped>
 a {
  color: grey;
--- a/test/fixtures/encoding/pages/@about.vue
+++ b/test/fixtures/encoding/pages/@about.vue
@ -0,0 +1,5 @@
+<template>
+  <div>
+    About
+  </div>
+</template>
--- a/test/fixtures/encoding/pages/dynamic/_id.vue
+++ b/test/fixtures/encoding/pages/dynamic/_id.vue
@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div>Query (SSR): <pre v-text="q" /> </div>
+    <div>Params (SSR): <pre v-text="p" /> </div>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ route }) {
+    return {
+      q: JSON.stringify(route.query),
+      p: JSON.stringify(route.params)
+    }
+  }
+}
+</script>
--- a/test/fixtures/encoding/pages/redirect.vue
+++ b/test/fixtures/encoding/pages/redirect.vue
@ -0,0 +1,13 @@
+<template>
+  <div>
+    Redirecting...
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ redirect }) {
+    return redirect('/dynamic/重新导向?foo bar')
+  }
+}
+</script>
--- a/yarn.lock
+++ b/yarn.lock
@ -1954,6 +1954,11 @@
    rc9 "^1.2.0"
    std-env "^2.2.1"

+"@nuxt/ufo@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/@nuxt/ufo/-/ufo-0.0.3.tgz#7673a54b81c020e7aea3a9e01e09a58c494a1eca"
+  integrity sha512-LQkuVafVNB9+ggRF7443AX1V1rEWRs32Frk7F2qnRLf8j/SzRzxEZ99jiZqxVho72zU7NcWQ6Jy62m4fkZC6Wg==
+
 "@nuxtjs/eslint-config@^5.0.0":
  version "5.0.0"
  resolved "https://registry.npmjs.org/@nuxtjs/eslint-config/-/eslint-config-5.0.0.tgz#d66143ee4ada9d944de0bfbe2d7e4693a2e20d60"