vuex之刷新页面时token丢失问题

最新推荐文章于 2025-07-23 08:25:51 发布

原创最新推荐文章于 2025-07-23 08:25:51 发布 · 5.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细阐述了如何通过sessionStorage在前端项目中避免Vuex状态在页面刷新时丢失，包括使用localStorage缓存、代码实现和初始化state的方法，确保登录状态在页面刷新后的延续性。

前端项目，使用vuex作为状态存储，但是遇到一个问题，就是在刷新页面时出现了丢失token的问题，下面给出完美的解答：

1.可以使用缓存将vuex中的state缓存起来，可以使用localStorage和sessionStorage。cookie不适合存储。
localStorage是长期存储，sessionStorage是会话期间存储，这里使用sessionStorage.
在这里插入图片描述

2.上代码
App.vue中添加 mounted()和methods，在刷新的时候进行持久化。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',

  /**
   * 当页面刷新时vuex存储的数据会消失，因此一般使用sessionStorage处理
   */
  mounted() {
    window.addEventListener('unload', this.saveState);
  },
  methods: {
    saveState() {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state));
    }
  },
}
</script>

在state初始化的时候，去sessionStorage中寻找token等相关参数。
上代码：

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

// 改写state, 防止出现刷新页面之后丢失state，需要对state进行格式化：JSON.parse()
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')).user : getDefaultState();

console.log("state: ", state);

const mutations = {
    RESET_STATE: (state) => {
        Object.assign(state, getDefaultState())
    },
    SET_TOKEN: (state, token) => {
        state.token = token
    },
    SET_NAME: (state, name) => {
        state.name = name
    },
    SET_AVATAR: (state, avatar) => {
        state.avatar = avatar
    }
}