vue实际运用六：处理token过期

vue实际运用六：处理token过期

1. 后端为了安全，token一般存在有效时间，当token过期，所有请求失效

解决方案：

1)在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

• 优点： 在请求前拦截，能节省请求，省流量
• 缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败
• 使用方法：axios.interceptors.request.use() 这个请求前拦截方法

---

2)根据拦截返回后的数据判断，若token过期，先刷新token，再进行一次请求。

• 优点：不需额外的token过期字段，不需判断时间
• 缺点： 会消耗多一次请求，耗流量
• 使用方法：axios.interceptors.response.use() 这个响应拦截方法

最简单方法：获取到过期code，直接跳到登录页

---

2. 实现方法二

1)封装axios基本结构

• token是存在localStorage中

//在request.js

import axios from 'axios'

// 创建一个实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000 // request timeout
})

// 从localStorage中获取token
function getLocalToken () {
    const token = window.localStorage.getItem('token')
    return token
}

// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
service.setToken = (token) => {
  instance.defaults.headers['X-Token'] = token
  window.localStorage.setItem('token', token)
}

// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  return response
}, error => {