身份令牌toKen Vuex + localStorage结合存储

前提：我们都知道在登陆的时候后台会返回一串字符串，也就是token, 也是我们常说的身份令牌，在后续的请求中只有在请求头中携带了token才会被允许访问后台数据，因此如何存储token就显得尤为重要。
如果直接将 ToKen 存储在 Vuex容器中，
好处： 1. 获取方便
2.响应式
缺点：只要页面一刷新就没数据了。
为了持久化，还需要把 Token 放到本地存储（localStorage–除非手动清除，永久存在）

持久化
所以，我们采取 Vuex 和本地存储相结合的方式来存储 Token
我们可以直接将操作Token 封装成一个模块，方便后续使用：

export const getToken = key => {const data = window.localStorage.getItem(key)console.log(data)try {return JSON.parse(data)} catch (err) {return null}
}export const getSetToken = (key, value) => {if (typeof value === 'object') {value = JSON.stringify(value)}window.localStorage.setItem(key, value)
}export const remove = key => {window.localStorage.removeItem(key)
}

然后在 store文件夹下 index.js文件中来调用封装方法

import Vue from 'vue'
import Vuex from 'vuex'
import { getToken, getSetToken } from '@/utils/token' // 按需导入要使用的方法
Vue.use(Vuex)
const key = 'DATA_USER' //  localStorage 中是以键值对形式存储的 在这定义一个key
export default new Vuex.Store({state: {user: getToken(key) // state公共数据源 所有组件均可访问 将token 保存在 state 中 ， // 因为要后续从 localStorage 中获取token 保存到 user 中 ，所以需要反序列化},mutations: {setUser(state, user) {state.user = usergetSetToken(key, user) // localStorage 中只能存储 JSON 字符串，且以键值对方式存储， 需要序列化 }},actions: {},modules: {}
})

然后在登陆页面调用 Vuex 中的 mutation中的方法来对从后台获取的token进行保存

   this.$store.commit('setUser', res.data.data)

身份令牌toKen Vuex + localStorage结合存储相关推荐

基于java注册登录MD5算法加盐加密颁发 Token身份令牌使用各种邮箱发送验证码详解雪花算法
目的作用 == 在项目中,为了防止别人窥视我们的密码通常我们会采取一些加密方式.这里简单介绍一下MD5 加盐加密方法,MD5叫做信息-摘要算法,严格来说不是加密方式,而是信息摘要. 对于可以接触到数据 ...
vue实现接口加token+vuex刷新丢失问题
第一步vuex 要想实现接口添加token.首先要存起来,这里我是用vuex来存储token和其他用户信息.如果不想使用也可以使用localStorage和sessionStorage来进行储存.因为 ...
基于.Net Framework 4.0 Web API开发（4）：ASP.NET Web APIs 基于令牌TOKEN验证的实现
概述: ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, ...
vue存储数据的几种方法（Vuex与本地存储）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 vue存储数据的几种方法(Vuex与本地存储) 前言一.vuex 1.创建vuex 2.存入数据 3.取出数据二.本地存储 1.存 ...
html5保存资源本地,html5之Localstorage本地存储
题外话今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
在HTML5 localStorage中存储对象
我想将JavaScript对象存储在HTML5 localStorage ,但是我的对象显然正在转换为字符串. 我可以使用localStorage存储和检索原始JavaScript类型和数组,但是对象 ...
HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
ThinkPHP6项目基操（18.实战部分表单令牌Token 防CSRF）
表单令牌Token 0. 前言 1. TP6 令牌token使用 1.1 表单提交 1.2 AJAX提交 2. TP6 令牌token验证 2.1 路由验证 2.2 控制器验证 2.3 验证器验证 0 ...
html 如何实现一条竖线边上有刻度_Android H5交互Webview实现localStorage数据存储
先看看效果图吧-- 实现比较简单,但是第一次用可能会遇到一些坑首先得有Webview控件: 有人问我是不是需要写布局文件,不写行不行,现在我就告诉你们,不写没问题,需要写就写不写直接创建New一个也 ...

身份令牌toKen Vuex + localStorage结合存储

身份令牌toKen Vuex + localStorage结合存储相关推荐

最新文章

热门文章