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

This commit is contained in:
pooya parsa 2020-12-06 18:32:39 +01:00 committed by GitHub
parent e9f380c9e6
commit fc51ca3330
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 214 additions and 147 deletions

View File

@ -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",

View File

@ -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) {

View File

@ -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
})

View File

@ -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",

View File

@ -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 += '?'
}
}

View File

@ -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",

View File

@ -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

View File

@ -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()
}

View File

@ -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) {}
}

View File

@ -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

View File

@ -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 })
]
}

View File

@ -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

View File

@ -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')
})
})

View File

@ -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()

View File

@ -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')
})
})

View File

@ -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;

View File

@ -0,0 +1,5 @@
<template>
<div>
About
</div>
</template>

View File

@ -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>

View File

@ -0,0 +1,13 @@
<template>
<div>
Redirecting...
</div>
</template>
<script>
export default {
asyncData ({ redirect }) {
return redirect('/dynamic/重新导向?foo bar')
}
}
</script>

View File

@ -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"