vuex操作localStorage实现token数据管理

本文介绍如何利用Vuex结合localStorage管理用户认证的Token信息,确保组件间数据同步与响应式更新,实现良好的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vuex管理token状态

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

vuex介入后的模式是:

  • 用户组件操控vuex
  • vuex操控localStorage

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

实际达成效果如下:

在这里插入图片描述

步骤

  1. 用户直接操控vuex。
  2. vuex操控localStorage实现用户token等信息的管理。
  3. 服务器端返回的token等信息要被 Vuex 和 localStorage 两个地方接管。
  4. 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存储的效果:

在这里插入图片描述

在这里插入图片描述

2. 清除token

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

示例代码

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

注意

  1. 如果单击 “取消”按钮,$dialog.confirm要返回错误处理,这里边通过catch接收,同时不用做任何操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值