router: {
middleware: 'auth'
},
After a refresh, middleware should detect loggedin is true and a redirect will not occur.
Redirected to login route, but the state is logged in.
Switching to spa mode fixes this issue, so I'm guessing this is happening due to the pre-rendering nature of ssr and the fact the server does not have access to client storage, but I'm not too sure.
current config:
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const pkg = require('./package')
require('dotenv').config()
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/assets/style/app.styl',
'~/assets/main.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: ['@/plugins/vuetify'],
/*
** Nuxt.js modules
*/
modules: [
// '@nuxtjs/dotenv',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
[
'nuxt-google-maps-module', {
key: process.env.PLACES_API
},
]
],
/**
* Router configuration
*/
router: {
middleware: 'auth'
},
/**
* Auth module configuration
*/
auth: {
// options
plugins: ['~/plugins/auth.js'],
redirect: {
login: '/login',
logout: '/login',
callback: false,
home: '/roles',
},
strategies: {
local: {
endpoints: {
login: {
url: '/api/auth/login',
method: 'post',
propertyName: 'token'
},
logout: false,
user: {
url: '/api/user',
method: 'get',
propertyName: 'user'
}
}
}
}
},
/*
** Axios module configuration
*/
axios: {
// See https://github.com/nuxt-community/axios-module#options
proxy: true,
},
/*
** Proxy config
*/
proxy: {
'/api': {
target: process.env.API_URL,
logLevel: 'debug',
pathRewrite: {
'^/api/': '/'
}
},
},
/*
** Build configuration
*/
build: {
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
loaders: {
stylus: {
import: ['~assets/style/variables.styl']
}
},
/*
** You can extend webpack config here
*/
// 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)/
// })
// }
// }
}
}
API_URL must be some reserved system variable for Node.js? I solved this by changing the env variable to API respectively in the .env file and nuxt.config.js
@russellsean It is an env used by axios (or http) module :)
@pi0 Good to know, thank you!
For anyone else having same issue... in my case I had { baseURL: '/api' } set for axios in nuxt config file. Changed it to the full url eg: 'http://127.0.0.1:3000/api/' and worked fine afterwards... thanks to this issue post.
Most helpful comment
For anyone else having same issue... in my case I had { baseURL: '/api' } set for axios in nuxt config file. Changed it to the full url eg: 'http://127.0.0.1:3000/api/' and worked fine afterwards... thanks to this issue post.