#yyds干货盘点#无痛刷新Token

时间:2021-03-14 01:07:24

怎么能无感知刷新token,以下面的项目经历做总结:

我是直接在main.js中设置了请求拦截器,作用是:

  • 每次请求时,带上token
  • 在拦截器中判断是否有返回token,有则将本地的token替换成返回的token
  • 后端设置响应码http code为401,返回此值时,此时用户的token过期/失效,删除本地存储的token,强制用户跳转到登录页
new Vue({
  router,
  store,
  created() {
    // http request 请求拦截器,有token值则配置上token值
    axios.interceptors.request.use(
      config => {
        let token = window.sessionStorage.getItem('token')
        // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
        if (token) {
          config.headers.Authorization = token
        }
        return config
      },
      err => {
        return Promise.reject(err)
      })
    // http response服务器响应拦截器
    // 自定义的 axios 响应拦截器
    axios.interceptors.response.use((response) => {
      // 判断一下响应中是否有 token,如果有就直接使用此 token 替换掉本地的 token
      var token = response.headers.authorization
      if (token) {
        // 如果 header 中存在 token,替换本地的 token
        window.sessionStorage.setItem('token', token)
      }
      return response
    }, (error) => {
      switch (error.response.status) {
        // 如果响应中的 http code 为 401,则此用户可能 token失效,清除本地的数据并将用户重定向至登录页面
        case 401:
          this.$message.error('登录已过期,请重新登录')
          window.sessionStorage.clear()
          this.$router.push('/login')
          break
      }
      return Promise.reject(error)
    })
  },
  render: h => h(App)
}).$mount('#app')