Vue中token的实现
时间:2019-10-15
本文章向大家介绍Vue中token的实现,主要包括Vue中token的实现使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在学习vue的过程中,正好项目中做的web系统对安全性有要求
转载自https://www.jianshu.com/p/d1a3fb71eb99
总:通过axios,vuex,及自定义的方法实现。
以下是思路:
1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh_token) / resetTime(token有效时间)
2.通过axios请求-回复来做相应的操作,具体实现如下:
对应修改之处:(自己看的,如果疑问,可留言)
一、在 main.js
中 ,写入如下代码
import axios from 'axios' import { getRefreshToken, isRefreshTokenExpired} from './assets/js/format' //刷新token的接口与过期时间倒计时 window.isReresh = false;//用于判断是否刷新,不能少 // 添加请求拦截器,在请求头中加token axios.interceptors.request.use( config => { let token = sessionStorage.getItem('Authorization'); if (token) { config.headers.Authorization = token; } return config; }, error => { return Promise.reject(error); }); // http response 拦截器 axios.interceptors.response.use( response => { let resetTime= sessionStorage.getItem('resetTime'); let token = sessionStorage.getItem('Authorization'); if(token){//有没有token isRefreshTokenExpired(resetTime); if(resetTime<1200){//时间少于20分钟(1200),20分钟之内为期限 if(!window.isReresh){ window.isReresh = true; let refresh_token = sessionStorage.getItem('refresh_token') getRefreshToken(refresh_token).then(res => { window.isReresh = false; isRefreshTokenExpired(res.data.resetTime);// 重新获取的token有效时间 store.commit('changeLogin',{//vuex中修改相关信息 Authorization:res.data.access_token, token_type:res.data.token_type, refresh_token:res.data.refresh_token, }); }).catch(err => {}); } }else window.isReresh = false; } return response; //请求成功的时候返回的data }, error => { try { if (error.response) { endLoading(); switch (error.response.status) { case 401://token过期,清除它,清除token信息并跳转到登录页面 store.commit('DelToken'); router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath//登录之后跳转到对应页面 } }); return; case 403://权限 store.commit('DelToken'); router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath//登录之后跳转到对应页面 } }); return; } } return Promise.reject(error.response.data) } catch (e) { } });
二、在 自定义的jsformat.js
中 ,写入如下代码
export function getRefreshToken(param) { // 刷新token 注意这里用到的service
let params = {
refreshToken:param
}
return axios.post(baseUrl+'/account-center/refresh/token',params)
.then((res) => {
return Promise.resolve(res.data)
})
}
export function isRefreshTokenExpired(timestamp) {
clearInterval(window.interval);
window.interval = setInterval(()=>{
timestamp=timestamp-1
sessionStorage.setItem('resetTime',timestamp)
},1000)
}
三、在vuex中的mutation
中
changeLogin: function (state, user ) {
// CryptoJS.enc.Base64.stringify(obj) 加密
// CryptoJS.enc.Base64.parse(base64).toString(CryptoJS.enc.Utf8) 解密
state.Authorization = user.token_type + ' ' + user.Authorization;
state.refresh_token = user.refresh_token;
state.user_message = CryptoJS.enc.Base64.parse(user.Authorization.split('.')[1]).toString(CryptoJS.enc.Utf8);
sessionStorage.setItem('Authorization', state.Authorization);
sessionStorage.setItem('user_message', state.user_message);
sessionStorage.setItem('refresh_token', state.refresh_token);
},
DelToken(state){
state.Authorization = '';
sessionStorage.clear();
},
原文地址:https://www.cnblogs.com/Desmondexperience/p/11678915.html
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
- boi剖析 - 基于webpack的css sprites实现方案
- 深入JDK源码之ThreadLocal类
- 独家 | 一文读懂TensorFlow基础
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- RPC原理及实现
- RMI原理及实现
- webpack多页面开发与懒加载hash解决方案
- 前后端分离和模块化-58到家微信首页重构之路
- Node.js建站笔记-使用react和react-router取代Backbone
- 协同过滤推荐算法Java代码实现
- Nginx模块之Filter解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- BOSS直聘招聘信息获取之爬虫程序分析
- 历时4个多月,学习了这 66 个CSS 特效
- ArrayList、LinkedList哪家强,据说90%人都不知道
- Windows创建克隆隐藏账号
- 学员分享-aspera踩坑记录
- BOSS直聘招聘信息获取之爬虫工具分析
- 把你的shiny网页工具部署在云服务器
- 面试中的路由问题
- BOSS直聘招聘信息获取之使用webdriver进行爬取
- es6中class的一些基础知识和es5语法的对比
- Windows 系统常用命令行命令(一):前言
- Vue项目使用mt-picker实现省市区三级联动踩坑记录
- Windows 系统常用命令行命令(二):路径与文件夹操作
- 微信小程序订阅消息推送
- 2020年中央一号文件说了啥?