vue token过期后自动刷新token

在系统登录后，后端返回一个token，和refreshToken。每次接口请求的时候都会携带这个token，但是这个token一般是有过期时间的，假设过期时间为半小时，你半小时内没有调接口。半小时后你再调接口，会报401错误，代表token过期，这个时候前端有两种解决方案，第一种也就是退出登录，让用户重新登录，这种比较简单。但是我们的经理不希望用户再次登录，而是希望这个token能自动更新，我就稍微的研究了一下，发现可行，所以记录到此，方便日后查看

自动刷新token的原理就是：

在axios响应拦截器中判断http状态是否是401，如果是，则拿着refreshToken去调接口，接口会返回新的token和refreshToken，将新token和refreshToken在vuex中从新赋值。然后继续调刚才报401的那个接口，这时候携带新token去请求就可以了

request.js

import axios from 'axios'
import store from '@/store'
import storage from 'store'
import notification from 'ant-design-vue/es/notification'
import { message } from 'ant-design-vue'
import { VueAxios } from './axios'
import { ACCESS_TOKEN } from '@/store/mutation-types'// 创建 axios 实例
const request = axios.create({// API 请求的默认前缀baseURL: process.env.VUE_APP_API_BASE_URL,timeout: 6000 // 请求超时时间
})const mytoken = `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6IjI5MTYzOTA1NzgyNzc1MTkzNjAiLCJOQU1FIjoiZHVhbnJvbmd5YW8iLCJuYmYiOjE2NDE5NzkwNzcsImV4cCI6MTY0MTk4MDg3NywiaXNzIjoiaHR0cDovLzM5LjEwMy4yMTUuNTE6MzAwMDQiLCJhdWQiOiJLYXlUdW5lIn0.b6Ps4BqI4BH6qDYbxTVGo72ctoUxL-9G_woXx_askrA`// 异常拦截处理器
const errorHandler = (error) => {// console.log(error.response);if(error.message == 'Network Error') {message.error('系统异常')}if (error.response) {const data = error.response.data// 从 localstorage 获取 tokenconst token = storage.get(ACCESS_TOKEN)if (error.response.status === 403) {notification.error({message: 'Forbidden',description: data.message})}// 判断http状态是否是401if (error.response.status === 401) {// 调接口，刷新tokenstore.dispatch('RefreshToken').then(() => {// 再发请求return request(error.config)}).catch((err)=>{message.error('系统异常')})}}return Promise.reject(error)
}// request interceptor
request.interceptors.request.use(config => {const accessToken = store.getters.tokenconst token = storage.get(ACCESS_TOKEN)// 如果 token 存在// 让每个请求携带自定义 token 请根据实际情况自行修改if (token) {config.headers['Access-Token'] = token}config.headers['Authorization'] = `Bearer ${accessToken}`return config
}, errorHandler)// response interceptor
request.interceptors.response.use((response) => {if(response.data instanceof Blob) {return response}return response.data
}, errorHandler)const installer = {vm: {},install (Vue) {Vue.use(VueAxios, request)}
}export default requestexport {installer as VueAxios,request as axios
}

user.js

import storage from 'store'
// import { login, getInfo, logout } from '@/api/login'
import { getInfo, logout, refreshTokenFn } from '@/api/login'
import { ACCESS_TOKEN, REFRESH_TOKIN } from '@/store/mutation-types'
import { welcome } from '@/utils/util'const user = {state: {token: '',refreshToken: '',name: '',welcome: '',avatar: '',roles: [],info: {},systemId: ''},mutations: {SET_TOKEN: (state, token) => {state.token = token},SET_RETOKEN: (state, refreshToken) => {state.refreshToken = refreshToken},SET_NAME: (state, { name, welcome }) => {state.name = namestate.welcome = welcome},SET_AVATAR: (state, avatar) => {state.avatar = avatar},SET_ROLES: (state, roles) => {state.roles = roles},SET_INFO: (state, info) => {state.info = info},SET_SYSTEMID: (state, data) => {state.systemId = data}},actions: {// 登录Login ({ commit }, userInfo) {return new Promise((resolve, reject) => {if (!userInfo.accessToken) {reject(new Error('403'))}storage.set(ACCESS_TOKEN, userInfo.accessToken, 7 * 24 * 60 * 60 * 1000)storage.set(REFRESH_TOKIN, userInfo.refreshToken, 7 * 24 * 60 * 60 * 1000)commit('SET_TOKEN', userInfo.accessToken)commit('SET_RETOKEN', userInfo.refreshToken)resolve()// login(userInfo).then(response => {//   const result = response.result//   storage.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)//   commit('SET_TOKEN', result.token)//   resolve()// }).catch(error => {//   reject(error)// })})},// 获取用户信息GetInfo ({ commit }) {return new Promise((resolve, reject) => {getInfo().then(response => {const result = response.resultconsole.log('result', result)if (result.role && result.role.permissions.length > 0) {const role = result.rolerole.permissions = result.role.permissionsrole.permissions.map(per => {if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {const action = per.actionEntitySet.map(action => { return action.action })per.actionList = action}})role.permissionList = role.permissions.map(permission => { return permission.permissionId })commit('SET_ROLES', result.role)commit('SET_INFO', result)} else {reject(new Error('getInfo: roles must be a non-null array !'))}commit('SET_NAME', { name: result.name, welcome: welcome() })commit('SET_AVATAR', result.avatar)resolve(response)}).catch(error => {reject(error)})})},// 登出Logout ({ commit, state }) {return new Promise((resolve) => {logout(state.token).then(() => {commit('SET_TOKEN', '')commit('SET_ROLES', [])storage.remove(ACCESS_TOKEN)resolve()}).catch((err) => {console.log('logout fail:', err)// resolve()}).finally(() => {})})},// 刷新tokenRefreshToken({commit, state}) {return new Promise((resolve, reject)=>{const refreshToken = `${state.refreshToken}`refreshTokenFn({refreshToken}).then((res)=>{if(res.code == 1) {commit('SET_TOKEN', res.data.accessToken)commit('SET_RETOKEN', res.data.refreshToken)resolve()}else {reject()}}).catch((err) => {reject(err)}).finally(() => {})})}}
}export default user

refreshTokenFn函数

/*** 刷新token* @param {*} parameter * @returns */
export function refreshTokenFn (parameter) {return request({// url: `${userApi.RefreshToken}?refreshToken=${parameter.refreshToken}`,url: `${userApi.RefreshToken}`,method: 'post',headers: { 'content-type': 'application/x-www-form-urlencoded' },data: qs.stringify(parameter),})
}

vue token过期后自动刷新token相关推荐

java如何判断token过期_【Java】后台判断token过期，后台刷新token，接下来该如何处理...
如标题所示我再详细描述一下我遇到的问题,如果我再发送请求的试试,后台验证header中的token,如果这时候,发现token过期,然后一系列判断其为合法token,允许token刷新,后台主动刷新 ...
token 过期后，如何自动续期？
JWT token的 payload 部分是一个json串,是要传递数据的一组声明,这些声明被JWT标准称为claims. JWT标准里面定义的标准claim包括: iss(Issuser):JWT的 ...
java app token 失效_请求时token过期自动刷新token操作
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
java 后台自动刷新请求_请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
python token过期_请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
token过期后刷新token并重新发起请求
系统登录成功后,后端返回token和refreshToken,所有请求都携带token,token如果过期接口将返回401,此时前端需要拿着refreshToken去刷新token,刷新后将拿到新的t ...
php token过期刷新处理,Laravel Passport token过期后判断refresh_token是否过期
需求:前后端分离状态下,登录失效(token过期)后,前端需要知道下一步是跳转到登录页面还是使用refresh_token刷新token. 这就需要后端根据是否可以刷新token(refresh_to ...
php token 自动过期,请求时token过期自动刷新token
1.在开发时这例随时幻近我些如机兼灯近我些如机兼灯过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次 ...
vue token过期后的处理和网关白名单
判断是否登录,已经登陆则获取getinfo.否则跳转登录. 如果返回401,token过期,就消除token.然后刷新就会跳转登录. 设置让他自己跳到登录,不用刷新. 网关白名单设置通过,其他的必须携 ...

vue token过期后自动刷新token

vue token过期后自动刷新token相关推荐

最新文章

热门文章