Vue Router beforeEach硬刷新后失效及权限验证异常求助

首先，咱们拆解下你遇到的核心问题：硬刷新后Vuex状态丢失，导致路由守卫判断错误，管理员无法进入admin页面，同时页面用户信息也消失。这几个问题是连锁反应，根源在于以下几点：

1. Vuex state初始化未正确解析localStorage用户数据：你直接把localStorage.getItem('user')赋值给state.user，但localStorage只能存字符串，所以user是JSON字符串而非对象，导致user.role为undefined，路由守卫里的user.role != "Admin"判断永远为true。
2. 路由守卫错误使用await：Vuex的getters是同步的，不需要用await获取，这会导致逻辑执行顺序混乱。
3. vue-localstorage用法错误：你没有正确注册插件，直接放在Vue实例选项里是无效的。
4. Vuex状态未持久化同步：页面刷新时Vuex会重置state，虽然初始化时取了localStorage，但如果后续修改state未同步更新localStorage，也会引发问题（当前核心问题是初始化解析错误）。

分步解决方案 #

1. 修复Vuex中localStorage的读取与序列化 #

先把localStorage里的user字符串解析为对象，同时处理localStorage不存在的情况（比如首次登录前）：

// Vuex模块代码
import Vue from 'vue'; 
import router from '../../router'; 

const state = { 
  token: localStorage.getItem('token') || '', 
  // 解析user为对象，不存在则设为null
  user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : null, 
  errors: [] 
}; 

const getters = { 
  isAuthenticated: state => !!state.token, 
  userInSession: state => state.user, 
  // 处理user为null的情况，避免报错
  isAdmin: state => state.user ? state.user.role === 'Admin' : false, 
  getToken: state => state.token || "" 
}; 

// 额外：添加mutation，确保修改state时同步更新localStorage
const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
    localStorage.setItem('token', token);
  },
  SET_USER(state, user) {
    state.user = user;
    localStorage.setItem('user', JSON.stringify(user));
  },
  CLEAR_STATE(state) {
    state.token = '';
    state.user = null;
    localStorage.removeItem('token');
    localStorage.removeItem('user');
  }
};

2. 修复路由守卫的逻辑与async/await问题 #

路由守卫里不需要async/await，因为getters是同步的，同时要先判断user是否存在，避免报错：

// Router的beforeEach函数
router.beforeEach((to, from, next) => { 
  const user = store.getters.userInSession; 
  const token = store.getters.getToken; 
  const isAdmin = store.getters.isAdmin;

  // 需要登录但未登录的情况
  if(to.matched.some(record => record.meta.requiresAuth) && !token) { 
    next({ name : 'Connexion'}); 
  } 
  // 需要管理员权限但不是管理员的情况
  else if (to.matched.some(record => record.meta.is_admin) && !isAdmin){ 
    next({ name: 'Tableau de bord'}); 
  } 
  // 游客页面但已登录的情况
  else if(to.matched.some(record => record.meta.guest) && token) { 
    next({ name: 'Tableau de bord'}); 
  } 
  else { 
    next(); 
  } 
})

3. 正确使用vue-localstorage（可选） #

如果你想用vue-localstorage插件，需要先正确注册，而非直接放在Vue实例里：

// main.js
import Vue from 'vue'; 
import App from './App.vue'; 
import router from './router'; 
import store from './store'; 
import VueLocalStorage from 'vue-localstorage'; 
import vuetify from './plugins/vuetify'; 

// 先注册插件
Vue.use(VueLocalStorage, {
  name: 'ls', // 自定义全局引用名称，可选
  storage: 'local' // 可选，local/session
});

new Vue({ 
  router, 
  store, 
  vuetify, 
  render: h => h(App) 
}).$mount('#app')

注册后，你可以在组件里用this.$ls.get('user')，或者在Vuex里调用，但其实手动处理localStorage已经足够，插件只是简化操作。

4. 组件中添加容错处理 #

硬刷新后如果user还未初始化完成（或解析失败），组件直接访问userInSession.prenom会报错，所以添加判断：

<v-list-item two-line> 
  <v-list-item-avatar> 
    <img src="https://randomuser.me/api/portraits/men/32.jpg"> 
  </v-list-item-avatar> 
  <v-list-item-content v-if="userInSession"> 
    <v-list-item-title>{{userInSession.prenom | capitalize}} {{userInSession.nom | capitalize}}</v-list-item-title> 
    <v-list-item-subtitle>{{userInSession.role | capitalize}}</v-list-item-subtitle> 
  </v-list-item-content>
  <!-- 未登录或user不存在时的占位 -->
  <v-list-item-content v-else>
    <v-list-item-title>请登录</v-list-item-title>
  </v-list-item-content> 
</v-list-item>

验证效果 #

做完以上修改后，硬刷新页面时：

1. Vuex会从localStorage读取并解析user为对象，isAdmin getter能正确判断角色
2. 路由守卫能正确识别管理员身份，允许进入admin页面
3. 组件里因为有v-if判断，不会出现报错，用户信息能正常显示

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