Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nuxt3: After the browser refreshes, the middleware gets lost in localStorage #223

Closed
4 tasks done
Ena-Heleneto opened this issue Jul 20, 2023 · 2 comments
Closed
4 tasks done
Labels
🗿 duplicate This issue or pull request already exists

Comments

@Ena-Heleneto
Copy link

Ena-Heleneto commented Jul 20, 2023

Describe the bug

"nuxt": "^3.6.3",
"pinia": "^2.1.4",
"@pinia-plugin-persistedstate/nuxt": "^1.1.1",

system:window

piniaPersistedstateOption in nuxt.config.ts

  piniaPersistedstate: {
    cookieOptions: { sameSite: 'strict' },
    storage: 'localStorage',
    debug: true,
  },

the pinia composables

import { acceptHMRUpdate, defineStore } from 'pinia'

export const userStore = defineStore('users', () => {
  /**
  * @description: 用户昵称
  */
  const userName = ref<string>('')

  /**
   * @description: 用户头像
   */
  const userAvatar = ref<string>('')

  /**
   * @description: 用户token
   */
  const userToken = ref<string>('')

  return { userName, userAvatar, userToken }
}, { persist: true })

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(userStore, import.meta.hot))

the Problem code in middleware/effective.global.ts

export default defineNuxtRouteMiddleware((to) => {
  consola.info([userStore().userToken, userStore().userName, userStore().userAvatar])
  if (!(userStore().userToken) && to.path !== '/login')
    return navigateTo('/login')
})

Details of the issue

When the browser is not refreshed for routing jumps, middleware can get the data to be localStorage, but when I refresh the browser, middleware cannot get the data, I think it is a problem of data persistence

Reproduction

https://stackblitz.com/github/HW-maintenance/HW_maintenance_web/tree/pinia-plugin-persistedstate_nuxt_issues

System Info

system:Windows
browswers:google chrome
Core dependencies:
    "nuxt": "^3.6.3",
    "pinia": "^2.1.4",
    "@pinia-plugin-persistedstate/nuxt": "^1.1.1",

Used Package Manager

pnpm

Validations

@Ena-Heleneto Ena-Heleneto added the 🔍️ pending triage This issue needs to be looked into label Jul 20, 2023
@MZ-Dlovely
Copy link
Contributor

maybe you're finding this one #221

@prazdevs
Copy link
Owner

Ye, this is pretty much a duplicate. If app is already up and running, persistence is set up and middleware will trigger it. While on initial render, it probably isnt for some reason. Gonna close this one specific issue as duplicate of #221. and eventually investigate in middleware usage if something is doable !

@prazdevs prazdevs closed this as not planned Won't fix, can't repro, duplicate, stale Jul 22, 2023
@prazdevs prazdevs added 🗿 duplicate This issue or pull request already exists and removed 🔍️ pending triage This issue needs to be looked into labels Jul 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🗿 duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants