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<){//时间少于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();
},