Vue中token刷新及token过期的实现

总：通过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){//有没有tokenisRefreshTokenExpired(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 注意这里用到的servicelet 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-1sessionStorage.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();},

vue的token刷新处理

Vue中token刷新及token过期的实现相关推荐

vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
本人近日做前端的后台管理系统项目,一个问题一直都没解决,就是页面中查看详情按钮第一次点击进去详情页可以被渲染,回退出来第二次进去钩子函数没有被执行,网上这类问题的解决方法并不多,一直以来都没解决,今天 ...
前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录
所用框架 vue+axios 为什么要刷新token 假设后端设置的token过期时间为10分钟.那么登录以后,过十分钟后token就会过期,这时再去操作系统,所有的请求都不能用,都会报token过期 ...
Retrofit 通过刷新头部Token解决token过期
需求分析: 使用token来维持用户登陆状态是很常见的,但应当明确后台设置的token也都是有一定期限的,假如说是7天,那么我们的用户信息的获取必然是和token相绑定的,所以不可避免的我们的Andr ...
Flutter中基于Dio实现Token Refresh
Flutter中基于Dio实现Token Refresh 1. 背景介绍目前项目在采用Flutter开发一款App,该工程中采用Dio框架作为网络请求框架,用户登录方面采用 OAuth2 协议.众所 ...
Vue刷新token，判断token是否过期、失效的最简便的方法
看了许多小伙伴分享的刷新token和判断token是否失效的方法,个人感觉有些难懂和不够简便.现结合个人开发实践分享一下使用vue axios请求拦截的方法来刷新token和判断token是否过期.失 ...
vue的token刷新处理
前言以token处理登录的web系统,一般会有两个token:access-token和refresh-token. node.js中,一般用jsonwebtoken这个模块. access-tok ...
vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...

Vue中token刷新及token过期的实现

Vue中token刷新及token过期的实现相关推荐

最新文章

热门文章