Vue-auth在IE/Edge中页面刷新时localStorage Token丢失问题求助

Hey there, sorry to hear you're hitting this cross-browser snag right before launch—IE/Edge can be such a headache! Let's break down the likely causes and fixes for why your auth token is vanishing from localStorage when refreshing those browsers, while Chrome/Firefox work fine.

First, Rule Out Browser-Level Issues #

Start with a quick sanity check to make sure it's not an IE/Edge setting causing the problem:

• Open IE/Edge, hit F12 to open DevTools, go to the Console tab.
• Run localStorage.setItem('test_token', 'hello_ie'), then refresh the page.
• Run localStorage.getItem('test_token')—if this returns null, the issue is with the browser's localStorage persistence (check if you're in InPrivate mode, or if browser settings block local storage). If it returns the value, the problem is with how vue-auth is handling storage.

Fix 1: Explicitly Configure Vue-Auth's Storage Driver #

Sometimes vue-auth's default storage handling can behave inconsistently in older browsers. Double-check your vue-auth setup to explicitly force it to use localStorage:

import Vue from 'vue'
import VueAuth from '@websanova/vue-auth'
import axios from 'axios'
import router from './router'

Vue.use(VueAuth, {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  // Explicitly set storage to localStorage (don't rely on defaults)
  storage: 'localStorage',
  // Ensure token is stored only in localStorage (not sessionStorage)
  tokenStore: ['localStorage'],
  // Set a clear token name to avoid naming conflicts
  tokenDefaultName: 'my_app_auth_token'
})

Fix 2: Transpile Vue-Auth for IE Compatibility #

IE 11 doesn't support modern ES6+ syntax, and if vue-auth's code isn't transpiled to ES5, it might throw silent errors that prevent token saving/loading. Update your Babel config to include the vue-auth package:

In your babel.config.js:

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  include: [
    // Transpile vue-auth's code to ES5 for IE support
    /node_modules\/@websanova\/vue-auth/
  ]
}

Don't forget to restart your dev server after making this change.

Fix 3: Check Auto-Refresh Logic #

If you've enabled vue-auth's auto-refresh feature, a failed refresh attempt in IE might trigger the library to clear the token. Temporarily disable auto-refresh to test:

Vue.use(VueAuth, {
  // ... other configs
  autoRefresh: false,
  refreshData: {} // Empty out refresh settings to prevent accidental calls
})

If the token stops disappearing, debug why the refresh request is failing in IE (check DevTools Network tab for errors).

Fix 4: Add Debug Logs to Track Token Flow #

Add some console logs to see exactly when the token is being removed. For example:

• In your login success handler, log localStorage.getItem('my_app_auth_token') to confirm it's saved.
• In your App.vue's created() hook, log the token on page load:

  created() {
    console.log('Page loaded - token:', localStorage.getItem('my_app_auth_token'));
  }
  

• Check DevTools' Application tab (in IE, it's the Storage tab) to watch localStorage changes as you refresh.

Final Notes #

IE/Edge have quirky behavior with localStorage—make sure your pages aren't using any meta tags or server headers that block local storage (like Cache-Control: no-store in extreme cases). Also, avoid writing to localStorage during page unload events, as IE might not persist those changes.

Hope these steps help you get this sorted before launch! Let me know if you need to dive deeper into any of these fixes.

内容的提问来源于stack exchange，提问作者Ominus