Vue senseless refresh token

Understanding of non-sensing refresh:
Realizing token non-sensing refresh is a very common technology for the front end. Its essence is to optimize the user experience. When the token expires, the user does not need to jump back to the login page to log in again. When it fails, intercept it, send a request to refresh the token, and get the latest token to overwrite it, so that the user does not feel that the token has expired

Some schemes for refreshing token

Solution 1: The backend returns the expiration time, the frontend judges the token expiration time, and calls the refresh token interface
Disadvantages: The backend needs to provide an additional Token expiration time field; the local time is used to judge, if the local time is tampered with, especially the local time When it is slower than the server time, the interception will fail.
Solution 2: Write a timer to refresh the Token interface regularly
Disadvantages: Waste of resources and performance, not recommended.
Solution 3: Intercept in the response interceptor, and call the refresh token interface after judging that the Token returns expired

There are three options, here we use the third option to solve

Ideas:

模拟操作:
 1. 手动修改本地储存里的那个token(改错 模拟过期)
 2. 触发需要标明身份的接口(错误token携带给后台操作)
 3. 请求返回状态为401 ,进入错误响应拦截器

 代码解决401问题
 有感刷新:
 清除token ,强制跳转回登陆页面,有感知的重新登陆拿到新token替换到本地
 需要重新触发接口,感觉特别不好

 无感刷新操作以及流程:
 刷新token,使用登陆时候保存的refresh_token,调用另外一个接口,换回来
 新的token值 ,替换到本地,再次完成本次未完成的请求(用户无感知)
 1.登陆页面 localStorage.setItem('refresh_token', res.data.data.refresh_token 存入 
 refresh_token
 2.在响应拦截器中对401状态码引入刷新token的api方法调用
 3.替换保存本地新的token
 4.error错误对象里headers替换成新的token
 5.axios再次发起这次未完成的请求,返回promise对象到最开始发请求的逻辑页面
 6.如果refresh_token也过期了，那么就判断是否过期，过期了就清除localStorage所有值跳转回登陆页面

Simple code:

First communicate with the back-end brother, let him return us the normal token and the refresh token in the login interface, and then we save them all, and then ask the back-end brother to write an interface for refreshing the token

The backend data obtained when logging in:

Save the backend data obtained when logging in

Then respond to the interceptor to judge that the status code is 401, which means that the identity has expired, and refresh the token without feeling here



// 添加响应拦截器  本质：就是一个函数
axios.interceptors.response.use(function (response) {
  // http响应状态码为2xxx 3xxx就进入这里
  // 对响应数据做些什么
  return response
}, async function (error) {
  // http 响应状态码为4xx 5xx就会进入这里
  console.log('error', error)
  if (error.response.status === 401) { // 状态码为401 身份过期
    

    removeToken()// 清除token,才能让路由守卫判断
   
    // 使用refresh_token 换回新的token再继续使用 用户无感知
    //请求后端给的刷新token的接口
    const res = await refreshTokenAPI()

    // 1.拿到新的token更新token到本地
  localStorage.setItem('token', res.data.data.token)
    
    
    // error.config 就是上一次axios请求的配置对象
    // console.dir(error.config)
    // 2. 把新的token赋予到下一次axios请求的请求头中

    error.config.headers.Authorization = 'Bearer ' + res.data.data.token

    // 3.未完成这次请求,再一次发起请求
    // 结果我们要return回原本逻辑调用地方 返回一个promise对象

    return axios(error.config)
    // 如果刷新的refresh_token也过期了
    // 判断refresh_token的请求的状态,路径,请求方式
  } else if (error.response.status === 500 && error.config.url === 'refresh_token请求的路径' && error.config.method === 'put') {
  //  清除localStorage所有值
    localStorage.clear()
    // 跳到登陆页
    router.replace('/login')
  }
  return Promise.reject(error)
})

The above is a personal summary of the use of Token in development. If there is any inappropriate description, please correct me. I will correct it in time and thank you!

Vue senseless refresh token

Guess you like