Hot reload the page and ssr

[cryptogateway]

Hello everyone, I ran into a problem that occurs very often, and the proposed solutions such as axios rollback do not help. The whole problem with (Hot reload the page), it gives loggedIn false, although with normal navigation everything is fine.

Tell me what is the problem?

nuxt.config.js:

import colors from 'vuetify/es5/util/colors'
import Api from './libs/api'

export default {

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s - paymex',
    title: 'paymex',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  axios: {
    baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://127.0.0.1:8082/v2',
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/vuetify.js' },
    { src: '~/plugins/snackbar.js' }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
    'nuxt-vuex-localstorage'
  ],

  auth: {
    cookie: false,
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'access_token',
          maxAge: 900 // 15 minute.
        },
        user: {
          property: false
        },
        refreshToken: {
          property: 'refresh_token',
          data: 'refresh',
          maxAge: 60 * 60 * 24, // 24 Hour.
          tokenRequired: true,
        },
        endpoints: {
          login: { url: Api.auth.getSignin, method: 'post' },
          refresh: { url: Api.auth.getRefresh, method: 'post' },
          logout: { url: Api.auth.setLogout, method: 'post', propertyName: 'refresh'},
          user: { url: Api.account.getUser, method: 'get' }
        },
        autoLogout: true
      }
    },
    redirect: {
      login: '/account/signin',
      logout: '/',
      callback: '/account/signin',
      home: '/dashboard'
    }
  },

  router: {
    middleware: ['auth']
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
}

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/auth-next": "^5.0.0-1624817847.21691f1",
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.8",
    "nuxt-vuex-localstorage": "^1.3.0",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1"
  }
}

thanks in advance...

[irsyaadbp]

i have same issue, if you use axios with proxy you can try my solutions
you can see here #1283 (comment)