Nuxt.js: How to fix nuxt redirect to homepage on hard refresh and direct access to any page

Created on 23 Dec 2019 · 8Comments · Source: nuxt/nuxt.js

Version

v2.9.1

Reproduction link

http://manvanstage.com.s3-website.eu-west-2.amazonaws.com/

Steps to reproduce

Navigation via links work perfectly, but if you tried to access any page directly or refresh any page it will redirect you to home page.

What is expected ?

Access any page directly or refresh any page should not redirect to homepage

What is actually happening?

Access any page directly or refresh any page redirect you to home page.

Additional comments?

Here is the website config nuxt.config.js
```JavaScript
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: 'x',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'x'
},
{
hid: 'keywords',
name: 'keywords',
content: 'x'
}
],
script: [
{ src: 'https://js.stripe.com/v3/' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap' }
]
},

/*
* Customize the progress-bar color
*/
loading: { color: '#fff' },
/
* Global CSS
*/
css: [
// You need a specific loader for CSS files
// https://github.com/mariomka/vue-datetime
'~node_modules/vue-datetime/dist/vue-datetime.css',
// Main CSS file in the project
'@/assets/css/main.css',
// https://fullcalendar.io/docs/vue
'@fullcalendar/core/main.css',
'@fullcalendar/daygrid/main.css',
],
/
* Plugins to load before mounting the App
*/
plugins: [
// The plugin is auth related which change user status to logged
'~plugins/mixins/user.js',
// The plugin is google map place object related which get collectionPlace and deliveryPlace objects
'~plugins/mixins/places.js',
// The plugin used for getting search for driver meta before searching
'~plugins/mixins/search.js',
// DateTimePicker
{ ssr: false, src: '~plugins/datetime.js' },
// The plugin used to store and getting final search result
'~plugins/mixins/search-result.js',
// The plugin used to store and getting customer jobs
'~plugins/mixins/customer-jobs.js',
// The plugin used to store and getting driver jobs
'~plugins/mixins/driver-jobs.js',
// The plugin is google map place object related which get Driver Place object
'~plugins/mixins/driver-place.js',
// Google Map API https://github.com/xkjyeah/vue-google-maps
// https://developers.google.com/maps/solutions/store-locator/clothing-store-locator
{ ssr: false, src: '~plugins/google-maps.js' },
// Persist and rehydrate your Vuex state between page reloads.
// https://github.com/robinvdvleuten/vuex-persistedstate
{ ssr: false, src: '~plugins/localStorage.js' },
// The plugin is contains google map common tasks
'~plugins/mixins/google-map-common-tasks.js',
// The plugin is contains math common tasks
'~plugins/mixins/math-common-tasks.js',
// The plugin is for formating or filters
'~plugins/mixins/filters.js',
// The plugin is for store current checkout job
'~plugins/mixins/checkout.js',
// The plugin Vue MQ (MediaQuery)
// https://github.com/AlexandreBonaventure/vue-mq
'~plugins/media-query.js',
// https://github.com/cretueusebiu/vform
'~plugins/vform.js',
//https://github.com/fullcalendar/fullcalendar-vue/issues/5
{ ssr: false, src: '~/plugins/full-calendar' },
// Get all places (id, lat, lng) used for area we cover
'~plugins/mixins/area.js',
// Star Rating Component for Vue 2.x
// https://github.com/craigh411/vue-star-rating
'~plugins/star-vote.js',
// Home HTML
'~plugins/mixins/home-html.js',
// Lazy load
//https://github.com/Akryum/vue-observe-visibility
//https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components/
'~plugins/lazyload.js',
],
/
* Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module'
],
/
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org/docs/
'bootstrap-vue/nuxt',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/auth',
// Load .env
'@nuxtjs/dotenv',
// Font awesome
['nuxt-fontawesome', {
component: 'fa',
imports: [
{
set: '@fortawesome/free-solid-svg-icons',
icons: ['fas']
},
{
set: '@fortawesome/free-brands-svg-icons',
icons: ['fab']
},
]
}],

'@nuxtjs/sitemap'

],
/**

.env
/
env: {
VUE_APP_GOOGLE_MAPS_API_KEY: process.env.VUE_APP_GOOGLE_MAPS_API_KEY,
stripe_key: process.env.NODE_ENV !== 'production' ? 'pk_test_123' : 'pk_test_123',
google_tag_on:false,
},
/
* Axios module configuration
* See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: process.env.NODE_ENV !== 'production' ? 'http://127.0.0.1:8000/api/' : 'http://hellovans-env.rqeysdn8mi.eu-west-2.elasticbeanstalk.com/api/',
//credentials: false
//proxy: true,
//https: true
},
proxy: {
'/api/': {
target: process.env.NODE_ENV !== 'production' ? 'http://127.0.0.1:8000/' : 'http://hellovans-env.rqeysdn8mi.eu-west-2.elasticbeanstalk.com/'
}
},
auth: {
//plugins: ['~/plugins/auth.js'],
strategies: {
local: {
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'meta.token' },
logout: { url: 'logout', method: 'post' },
user: { url: 'user', method: 'get', propertyName: 'data' }
},
}
},

},
/*
* Build configuration
*/
build: {
/
** You can extend webpack config here
*/
//analyze: true,
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: "pre",
test: /.(js|vue)$/,
loader: "eslint-loader",
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
},
server: {
port: 3001, // default: 3000
host: 'localhost' // default: localhost
}
}

bug-report

Source

yamenshahin

All 8 comments

Nothing is redirected on your site.
http://manvanstage.com.s3-website.eu-west-2.amazonaws.com/area-we-cover

refresh and it stays there nothing redirected

aldarund on 23 Dec 2019

Apparently this happens only if you are not logged in before, so maybe it's something related to nuxt/auth and cleared site data (storage, cache etc..)

Nothing is redirected on your site.
http://manvanstage.com.s3-website.eu-west-2.amazonaws.com/area-we-cover

refresh and it stays there nothing redirected

yamenshahin on 23 Dec 2019

No idea what u mean by not loged in before. I didnt login at all.
So anyway its seems like its soem of your code or configuration. Create a minimal reproduction with your problem, otherwise its nearly impossible to help

aldarund on 23 Dec 2019

👍1

Yes, this issue seems to pop up in nuxt/auth, I cannot figure out what's wrong for the life of me, but it seems that the login doesn't persist on the server side, so you're just logged out there, but as soon as you get to client side, you're suddenly magically logged in and I have no idea how to work around this bug, it's been killing me for the last 3 days... It happens when I just log in with local scheme and I hit refresh, as long as I don't reload manually, it works fine.

truesteps on 9 Jan 2020

👍1

hello @truesteps , hahaha, same problem like me, same orrible situation.. but... I think it is the right thing that must happen, After one week that i understand better nuxt/auth, I understand that when you refresh manualy, you obviusly do not send header with any token, so logout...

giovannimanzoni on 10 Jan 2020

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

Verify that you can still reproduce the issue in the latest version of nuxt-edge
Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

stale[bot] on 13 Feb 2020

Hello everyone, did you find any solution to this ?
It seems I have the same issue :

I configured my server with nginx as a reverse proxy for a Nuxt/Express SSR application. For the moment I have a login page, and a home page.

I can connect and disconnect without any problem.

However, when I'm connected and I refresh the page, the loading time is very long.

I don't know if this is due to Nginx configuration or the authentication API or redirection.

I've noticed that it also happens when I type my url myself in the address bar.

kamilcglr on 5 Jun 2020

I confirm this issue.
On dev environment, when I do npm run dev, I have this issue.
I login and when I refresh, it redirects me as if I am not logged in.

But when It is productions environment npm run build && npm run start, It works fine. It doesn't redirect.
I really don't like how nuxt auth works. Documentation, to say the least, leaves a lot to be desired.