Token过期处理

Token用于进行接口鉴权，但是Token具有由后端设置的过期时间，当Token过期以后，就无法再请求数据了

项目中后端设置的过期时间为24h，测试时我们可以手动修改token值让Token失效

处理方式：

方式1：用户重新登录，获得新的Token就可以了，但是当过期时间较短的时候，每次都是要重新登录操作的，体验很差

为了提高用户的信息安全性，Token的过期时间都比较短（就算万一泄露了，过一会儿也就过期无效化了）

方式2：根据用户信息，自动给用户生成新的Token，减少登录次数

我们观察前面的功能的话，接口的响应信息中是有三个和token相关的信息的

access_token：当前使用的token，用于访问需要授权的接口

expires_in：access_token的过期时间

refresh_token：刷新获取新的access_token

刷新Token 的方法有两种：

方法一：

在每个请求发起前进行拦截，根据expires_in判断token是否过期，如果过期则会刷新后再继续请求接口

优点：请求前拦截处理，能节省请求次数

缺点：后端需要提供Token过期时间字段（例如：expires_in），并且需要结合计算机本地时间判断，如果计算机时间被篡改（特别是比服务器时间满）时，拦截会失败的

方法二：

在每个请求响应后进行拦截，如果发现请求失败（Token过期导致的）时，刷新Token再刷新请求接口

优点：无需Token过期时间字段，无需判断时间

缺点：多消耗一次请求

这里推荐使用方法二，相比较下来，方法二更加的稳定，不会出现意外的问题

Axios响应拦截器与错误处理

响应拦截器会在响应接收完毕，在对应请求处理前被拦截器拦截，响应拦截器参数response中保存了相应的信息

// Axios 官方文档：响应拦截器

// Add a response interceptor

axios.interceptors.response.use(function (response) {

  // Any status code that lie within the range of 2xx cause this function to trigger

  // Do something with response data

  return response;

}, function (error) {

  // Any status codes that falls outside the range of 2xx cause this function to trigger

  // Do something with response error

  return Promise.reject(error);

});

那么我们接来下将响应拦截器设置到utils/request.js中，将axios更改为创建的request（因为我们使用了ESLint规范，记得去除所有的分号）

error是需要console.dir()输出的

// utils/request.js

...

// 设置响应拦截器

request.interceptors.response.use(function (response) {

  // 状态码为 2xx 都会进入这里

  console.log('请求响应成功了：', response)

  return response

}, function (error) {

  // 超出 2xx 都会进入这里

  console.dir(error)

  return Promise.reject(error)

})

export default request

Axios错误处理

错误处理，需要在拦截器中找到特定的错误情况进行token刷新

当出现错误时，通过Elemnt的Message组件设置提示，这里我们采用的是引入方式操作

引入的Message与之前使用的this.$message是相同的，只是引入方式与操作方式不同

// 通过局部引入的方式，引入Element的Message组件功能

import { Message } from 'element-ui'

// 响应拦截器

request.interceptors.response.use(function (response) {

  // 状态码2xx会执行这里

  console.log('响应成功了', response)

  return response

}, function (error) {

  if (error.response) {

    // 请求发送成功，响应接收完毕，但是状态码为失败的情况

    // 1.判断失败的状态码情况（主要处理401的情况）

    const { status } = error.response

    let errorMessage = ''

    if (status === 400) {

      errorMessage = '请求参数错误'

    } else if (status === 401) {

      // 2.Token无效（过期）处理

      errorMessage = 'Token 无效'

    } else if (status === 403) {

      errorMessage = '没有权限，请联系管理员'

    } else if (status === 404) {

      errorMessage = '请求资源不存在'

    } else if (status >= 500) {

      errorMessage = '服务器错误，请联系管理员'

    }

    Message.error(errorMessage)

  } else if (error.request) {

    // 请求发送成功，未收到响应

    Message.error('请求超时请重试')

  } else {

    // 意料之外的错误

    Message.error(error.message)

  }

  // 将本次请求的错误对象继续向后抛出，让接收响应的处理函数进行操作

  return Promise.reject(error)

})

刷新Token

HTTP 状态码401表示未授权，导致401的情况有：

没有Token

Token无效

Token过期

判断方法：

检测是否存在refresh_token：（后端通常会限制每个refresh_token只能获取一次新的Token）

如果有，那就通过refresh_token获取新的access_token

获取成功，重启发送请求，请求接口数据就行

获取失败，跳转登录页

如果没有，跳转登录页

由于要进行跳转，在utils/request.js中引入router/index.js

// utils/request.js

// 引入 router

import router from '@/router'

首先要检测store是否有user信息（有就证明是正常登陆，一定存在的有refresh_token），如果存在的有refresh_token的话就请求新的access_token，需要用到对应的刷新接口，接下来检查是否有新的access_token

失败的话，清除用户信息，跳转登录页

跳转登录操作与之前是一致的，建议封装起来

成功的话，更新access_token，同时重新请求之前401的接口

// utils/

...

// 封装跳转登录页面的函数

function redirectLogin () {

  router.push({

    name: 'login',

    query: {

      // router.currentRoute 用于获取当前路由对应的路由信息对象

      redirect: router.currentRoute.fullPath

    }

  })

}

// 设置响应拦截器

request.interceptors.response.use(function (response) {

  ...

}, function (error) {

  // 超出 2xx 都会进入这里

  if (error.response) {

    ...

  } else if (status === 401) {

    if (!store.state.user) {

      /* router.push({

        name: 'login',

        query: {

          // router.currentRoute 用于获取当前路由对应的路由

          redirect: router.currentRoute.fullPath

        }

      }) */

      // 封装函数后更改为调用

      redirectLogin()

      // 阻止后续操作，向下抛出错误对象

      return Promise.reject(error)

    }

    ...

    }).then(res => {

      if (res.data.state !== 1) {

        // 清除已经无效的用户信息

        store.commit('setUser', null)

        // 跳转登录页

        /* router.push({

          name: 'login',

          query: {

            // router.currentRoute 用于获取当前路由对应的路由

            redirect: router.currentRoute.fullPath

          }

        }) */

        // 封装函数后更改为调用

        redirectLogin()

        // 阻止后续操作，向下抛出错误对象

        return Promise.reject(error)

      }

      ...

        }).catch(() => {

        store.commit('setUser', null)

        /* router.push({

          name: 'login',

          query: {

            // router.currentRoute 用于获取当前路由对应的路由

            redirect: router.currentRoute.fullPath

          }

        }) */

        // 封装函数后更改为调用

        redirectLogin()

        return Promise.reject(error)

      })

  } else if (status === 403) {

  ...

处理Token重复刷新

如果页面中存在多个请求（大多数页面中都不会只有一次请求），如果Token过期，每个请求都会刷新Token，这个时候刷新多次都没有意义，又增加了请求个数，还会出现额外的问题

通过浏览器的开发者工具观察，有两次的刷新Token请求，由于两次的刷新token携带的refresh_token相同，会导致一次成功一次失败，失败的那一次会导致页面跳转请求页

为了避免多次请求刷新Token，可以通过一个变量isRefreshing标记Token的刷新状态

默认状态为false，并且在发送刷新Token请求前检测，状态是false才能发送

发送刷新请求的时候，设置标记为true

请求完毕，设置为false

// layout/components/app-header.vue

...

// 是否正在更新 Token

let isRefreshing = false

request.interceptors.response.use(function (response) {

...

  } else if (status === 401) {

    if (!store.state.user) {...}

    // 发送刷新请求前判断 isRefreshing 是否存在其他已发送的刷新请求

    // 1 如果有，则将当前请求挂起，等到 Token 刷新完毕再重发，这里先设置为 return

    if (isRefreshing) {

      return

    }

    // 2. 如果没有，则更新 isRefreshing 并发送请求，继续执行后续操作

    isRefreshing = true

    // 发送刷新请求

    return request({

     ...

    }).then(res => {

      ...

    }).catch(() => {

      ...

    }).finally(() => {

      // 3 请求完毕，无论成功失败，设置 isRefreshing 为 false

      isRefreshing = false

    })

  } else if (status === 403) {

...

虽然刷新Token的问题解决了，但是之前发送的两个请求只有一个成功执行，其他的请求都被阻止了

如何解决？

我们声明一个数组存储所有被挂起的请求，当Token刷新完毕再将这些请求重新发送

// 存储是否正在更新token 的状态

let isRefreshing = false

// 存储因为token刷新而挂起的请求

let requests = []

// 响应拦截器

request.interceptors.response.use(function (response) {

  // 状态码2xx会执行这里

  console.log('响应成功了', response)

  return response

}, function (error) {

  if (error.response) {

    // 请求发送成功，响应接收完毕，但是状态码为失败的情况

    // 1.判断失败的状态码情况（主要处理401的情况）

    const { status } = error.response

    let errorMessage = ''

    if (status === 400) {

      errorMessage = '请求参数错误'

    } else if (status === 401) {

      // 2.Token无效（过期）处理

      // 第一，无token信息

      if (!store.state.user) {

        redirectLogin()

        return Promise.reject(error)

      }

      // 检测是否已经存在了正在刷新token的请求

      if (isRefreshing) {

        // 将当前失败的请求存起来，存储到请求列表中

        return requests.push(() => {

          // 当前函数调用后，会自动发送本次失败请求

          request(error.config)

        })

      }

      isRefreshing = true

      // 第二，Token无效（错误Token，过期Token）

      // 发送请求，获取新的access_token

      return request({

        method: 'POST',

        url: '/front/user/refresh_token',

        data: qs.stringify({

          refreshtoken: store.state.user.refresh_token

        })

      }).then(res => {

        // -刷新token失败

        if (res.data.state !== 1) {

          // 清除无效的用户信息

          store.commit('setUser', null)

          // 封装重复的跳转登录操作

          redirectLogin()

          return Promise.reject(error)

        }

        // 刷新token成功

        // 存储新的token

        store.commit('setUser', res.data.content)

        // 重新发送失败的请求

        // 根据reques

        // 发送多次失败的请求

        requests.forEach(callback => callback())

        // 发送完毕清除requests 内容即可

        requests = []

        // 将本次请求发送

        return request(error.config)

      }).catch(err => {

        console.log(err)

      }).finally(() => {

        // 无论成功还是失败都会执行

        // 请求发送完毕，响应处理完毕，刷新状态更改为false就行了

        isRefreshing = false

      })

解决

巴特西

Token过期处理

最新文章

热门文章