token失效的介入处理

token失效的介入

在前端项目开发的时候，前台向后台请求数据的时候很多时候需要传递token值，否则会返回401或403的错误码；但开门的钥匙(token)不是一直有效的，如果一直有效，会存在安全风险。

但一般后台会对token设置了时效性，提高安全性，若超过时效就会导致用户无权限再次登录或者获取数据，因此我们需要对token失效进行介入，一般有主动介入和被动介入，具体如下：

主动介入

业务流程图

流程图转化代码： 分析：我们可以选择在请求拦截器进行处理token的失效，代码如下

// 创建axios实例
const service = axios.create({...})
// 设置请求拦截器
service.interceptors.request.use((config) => {
  // 每次请求注入token，如果有token才注入，因为有些页面不需要token，例如登录页
  if (store.getters.token) {
    // 在注入token之前，主动介入处理token失效
    // 1.设置失效时间
    const timeout = 具体时间
    // 2.获取上一次登录的时间戳
    const last = localStorage.getItem('time')
    // 3.设置现在时间戳
    const now = Date.now()
    // 4.判断是否超时
    if (now - last > timeout) {
      // 5.超时，回到登录页，清空数据
      store.commit('user/clearToken')
      router.push('/login')
      // 6.并使用js原生Promise方法打断当前操作
      return Promise.reject('System error')
    } else {
      // 7.如果未超时，操作了，更新时间戳
      localStorage.setItem('time', Date.now())
    }
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
})

在登录请求成功后记录当前的时间戳：

// 登陆请求成功后，记录当前时间戳
    localStorage.setItem('time', Date.now())

被动介入

业务流程图

流程图转换代码

分析：我们可以在响应拦截器中进行token失效的被动介入处理，因响应拦截器有两个参数，第一个用于拦截成功类的响应，第二个用于拦截错误码（非200错误码）的响应，具体代码如下

service.interceptors.response.use((res) => {
  ...
}, (err) => {
  // 当后台返回错误对象err和10002错误码时，清理token值并跳到登录页
  if (err.response && err.response.data.code === 10002) {
    store.commit('user/clearToken')
    // 跳转到登录页
    router.push('/login')
  }
  // 当出现服务器崩了或者请求路径出错，拦截后台返回非200的错误码
  Message.error('系统错误')
  return Promise.reject('系统错误')
})

总结：无论是主动介入还是被动处理，这些操作都是为了更好地处理token，减少错误异常的可能性