Persist Pinia store với localStorage?

Dùng plugin pinia-plugin-persistedstate:

javascript

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// store
export const useAuthStore = defineStore('auth', () => {
  const token = ref('')
  return { token }
}, {
  persist: {
    storage: localStorage,
    pick: ['token'],  // chỉ persist token
  }
})

Lưu ý: không persist sensitive data trong localStorage (dễ bị XSS đọc).

Dùng sessionStorage hoặc HTTP-only cookies cho auth tokens.

Use pinia-plugin-persistedstate:

javascript

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// store
export const useAuthStore = defineStore('auth', () => {
  const token = ref('')
  return { token }
}, {
  persist: {
    storage: localStorage,
    pick: ['token'],  // only persist token
  }
})

Pitfall: do not persist sensitive data in localStorage (easily read via XSS).

Use sessionStorage for session-scoped tokens, or HTTP-only cookies (set via server Set-Cookie header — cannot be set from client-side JS) for auth tokens.

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js

Dùng plugin pinia-plugin-persistedstate:

javascript

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// store
export const useAuthStore = defineStore('auth', () => {
  const token = ref('')
  return { token }
}, {
  persist: {
    storage: localStorage,
    pick: ['token'],  // chỉ persist token
  }
})

Lưu ý: không persist sensitive data trong localStorage (dễ bị XSS đọc).

Dùng sessionStorage hoặc HTTP-only cookies cho auth tokens.

Use pinia-plugin-persistedstate:

javascript

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// store
export const useAuthStore = defineStore('auth', () => {
  const token = ref('')
  return { token }
}, {
  persist: {
    storage: localStorage,
    pick: ['token'],  // only persist token
  }
})

Pitfall: do not persist sensitive data in localStorage (easily read via XSS).

Use sessionStorage for session-scoped tokens, or HTTP-only cookies (set via server Set-Cookie header — cannot be set from client-side JS) for auth tokens.