vue3 监听sessionstorage中值的变化

转载

小鱼儿 2024-10-08 20:37:42

文章标签 前端 vue.js javascript 响应式数据 文章分类 架构后端开发

vuex管理token状态

localStorage是浏览器技术，不是Vue的，其本身并没有“响应式”技术，故一个组件修改了localStorage的用户信息后，另外一个组件并不能马上get(获得)到 (除非页面刷新)，用户体验不好。现在使用vuex技术，实现多个组件之间共享数据、更新数据，还有响应式效果，并且vuex的数据可以被vue很好的监听。

vuex介入后的模式是：

用户组件操控vuex
vuex操控localStorage

通过vuex操作localStorage实现token数据的管理。

实际达成效果如下：

vue3 监听sessionstorage中值的变化_前端

步骤：

用户直接操控vuex。
vuex操控localStorage实现用户token等信息的管理。
服务器端返回的token等信息要被 Vuex 和 localStorage 两个地方接管。
Vuex有响应式，数据变化了马上可以感知，localStorage持久存储，页面关闭或刷新数据不会丢失。

src/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// localStorage 存储用户信息的key名称，统一设置，方便后续使用
const USER_KEY = 'hm-toutiao-m-user'

export default new Vuex.Store({
  state: {
    // 通过 || 设定，如果localStorage没有数据，就返回{}空对象
    user: JSON.parse(localStorage.getItem(USER_KEY) || '{}')
  },
  mutations: {
    // 修改/更新用户信息
    // data:{token:xx,refresh_token:xx}
    updateUser (state, data) {
      // 1. vuex做更新，使得有响应式
      state.user = data
      // 2. localStorage做持久更新
      localStorage.setItem(USER_KEY, JSON.stringify(data))
    },
    // 清除用户信息
    clearUser (state) {
      // 1. vuex做清除，使得有响应式
      state.user = {}
      // 2. localStorage做持久清除
      localStorage.removeItem(USER_KEY)
    }
  },
  actions: {
  },
  modules: {
  }
})

1. 存储token

通过Vuex实现token的存储管理，调用vuex的方法，存储token等信息。

示例代码：

// user/login.vue
// 登录系统
async login () {
    // 调用api，校验账号信息有效，如下api请求有可能[成功]，还有可能[失败]
    try {
        const result = await apiUserLogin(this.loginForm)
        // console.log(result) // {token:xx,refresh_token:xx}
        
        // 通过vuex维护服务器端返回的token等秘钥信息
        this.$store.commit('updateUser', result)

        this.$toast.success('登录成功')
        // 页面跳转
        this.$router.push('/')
    } catch (err) {
        // 错误信息提示 vant组件库方法
        this.$toast.fail('手机号或验证码错误' + err)
    }
}

用户登录系统后，token存储的效果：

vue3 监听sessionstorage中值的变化_响应式_02

vue3 监听sessionstorage中值的变化_前端_03

2. 清除token

退出登录并不只是单纯的跳转到登录页,而是应该在退出之前清除token, 这里还要用到vuex。

示例代码

// user/index.vue
// 退出系统
logout () {
  // 确认
  this.$dialog.confirm({
    title: '退出',
    message: '确认要退出系统么？'
  }).then(() => {
    // 确认逻辑
    // 数据清除--->用户-->vuex
    this.$store.commit('clearUser')
    // 跳转
    this.$router.push('/login')
  }).catch(() => {
    // 取消逻辑-留空即可
  })
},

注意：