vue 双Token 的无感刷新

何为双 token

- accessToken : 用户获取数据权限

- refreshToken : 用来获取新的accessToken

双 token 验证机制，其中 accessToken 过期时间较短，refreshToken 过期时间较长。当 accessToken 过期后，使用 refreshToken 去请求新的 token。

无感刷新：

当客户端检测到access token即将过期或已经过期时，自动在后台向认证服务器发起请求，携带refresh token换取新的access token。这个过程对用户来说是无感知的，即用户不需要重新登录，页面也不会中断或刷新，因此被称为“无感刷新”。

实现方式：

当 accessToken 过期时，调接口，会返回201，表示token过期，这个时候需要调用 refreshToken 接口，重新获取新的token，在这个期间执行的请求，都存放到一个新的请求队列中，当获取新的token之后再重新调用，接口返回202的时候表示 refreshToken 过期，需要给用户提示，重新登录页面，跳转到登录页

具体步骤：

1.先再store 中定义接口，存储 refreshToken 和 accessToken ，定义刷新token接口，修改 refreshToken 和 accessToken

import {
   
    login,refreshToken} from '@/api/login'

const user = {
   
   
  state: {
   
   
    access_token: getStore({
   
   
      name: 'access_token'
    }) || '',
    refresh_token: getStore({
   
   
      name: 'refresh_token'
    }) || '',
  },

  mutations: {
   
   
    SET_ACCESS_TOKEN(state, token) {
   
   
      state.access_token = token
      setStore({
   
   
        name: 'access_token',
        content: state.access_token,
        type: 'session'
      })
    },
    SET_REFRESH_TOKEN: (state, rfToken) => {
   
   
      state.refresh_token = rfToken
      setStore({
   
   
        name: 'refresh_token',
        content: state.refresh_token,
        type: 'session'
      })
    },
  },

  actions: {
   
   
    // 登录
    Login({
    
     commit }, userInfo) {
   
   
      const loginname = userInfo.loginname.trim()
      const password = userInfo.password
      return new