web项目开发中2个Token原因解析及示例代码

import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios'import { getToken, setToken } from './token'import router from '../router/index.js'import { Toast } from 'vant'Vue.use(VueAxios, axios)const instance = axios.create({  baseURL: '基地址',  timeout: 100000})// 添加请求拦截器instance.interceptors.request.use(  function (config) {    // 统一添加token    getToken() && (config.headers['Authorization']= `Bearer ${getToken().token}`)    return config  },  function (error) {    return Promise.reject(error)  })// 添加响应拦截器/** * 1.if 401 else 不管 * 2.if 有token else 跳转登录页 * 3.try-catch 用 refresh_token 去获取 token, if 成功 else refresh_token失效了,跳转登录页 * 4.保存获取的 token, 更新, 继续执行用户要的操作 */instance.interceptors.response.use(  function (response) {    return response  },  async function (error) {    if (401 === error.response.status) {      setTimeout('console.clear()', 2000)      if (getToken()) {        try {          // 登录了, 但是短T过期, 用长T获取短T(刷新用户token)          let res = await axios({            url: '基地址/v1_0/authorizations',            method: 'PUT',            headers:{Authorization : `Bearer ${getToken().refresh_token}`}          })          // 更新短T          let token = getToken()          token.token = res.data.data.token          setToken(token)          // 继续用户操作          return instance(error.config)        } catch (error) {          // 长T失效,跳转登录页          Toast.fail('请先登录')          router.push({ path: '/login' })        }      } else {        // 未登录,跳转登录页        Toast.fail('请先登录')        router.push({ path: '/login' })      }    }    return Promise.reject(error)  })export default instance