token 存储，token失效

lryh_

已于 2022-05-11 11:34:15 修改

阅读量2.2k

点赞数 1

分类专栏：总结文章标签： vue.js

于 2022-04-20 21:04:16 首次发布

本文链接：https://blog.csdn.net/lryh_/article/details/124306109

版权

本文介绍了在Vue.js应用中如何管理和存储Token。推荐使用Vuex进行状态管理，并结合内存、Cookie和localStorage实现Token的持久化。当Token可能失效时，会优先从本地存储中获取，如果获取不到则初始化为空。同时，利用js-cookie库操作Cookie，并通过vuex-persistedstate插件实现Vuex数据的持久化。最后，通过请求拦截器确保每个请求携带Token，并在响应拦截器中处理401状态码，以处理Token失效的情况。

摘要由CSDN通过智能技术生成

1、token 在诸多组件中可能用得到，建议用vuex管理数据，包裹同步mutations 和异步 actions，整个模式就变成vuex到actions，业务组件中直接触发actions函数

2、 vuex存储数据的方式：基于内存（特点：存取速度特别快，vuex和vue经过绑定，使用方便，快，刷新浏览器会丢失）

3、 cookie和localStorage 本地存储：基于磁盘（特点：存取速度稍慢，持久化的功效，浏览器刷新不会丢失）

4、token有时效，可能失效，故使用vuex配合cookie，初始化时优先从本地取，取到就用，取不到再按格式要求初始化成空串

1、本地存储

  state: {
    token: localStorage.getItem('token') || '',

  },
  mutations: {
    setToken(state, newToken) {
      // token 存储到本地local storage
      localStorage.setItem('token', newToken)
    },
    // 清除token,用户信息
    removeInfoToken(state) {
      localStorage.removeItem('token') 
    }
 
  }