token续签--通过响应拦截器判断

最新推荐文章于 2023-10-24 08:48:04 发布

ShaneKori

最新推荐文章于 2023-10-24 08:48:04 发布

阅读量181

点赞数

分类专栏：前端 js vue 文章标签：前端 javascript ajax

本文链接：https://blog.csdn.net/m0_63091773/article/details/126862392

版权

前端同时被 3 个专栏收录

6 篇文章 2 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

处理token的方法

export const setToken = ({ key = 'kre-lee', token }) => {
  localStorage.setItem(key, token)
  return localStorage.getItem(key)
}
export const getToken = (key = 'kre-lee') => {
  return localStorage.getItem(key)
}
export const removeToken = (key = 'kre-lee') => {
  localStorage.removeItem(key)
}

逻辑体

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

  return response
},
async function (error) {

  // 再次请求refreshToken失败 -- 判断状态码及响应路径判断是refreshToken错误执行这里
  if (error.response.status === 500 && error.request.responseURL === 'http://toutiao.itheima.net/v1_0/authorizations') {
    removeToken()	// 清除本地token
    router.replace('/login')	// 返回登录页面
    Notify({ type: 'warning', message: '身份过期' })	//提示	-- 这里是vant提示组件
		
  } else if (error.response.status === 401) {			// 401表示token过期或错误
    if (getToken('refresh_token')?.length > 0) {	
// 如果本地有'refresh_token'执行这里，?.表示没有length就返回undefined, undefined > 0 === false
// 无感刷新
			// 发起刷新token请求
      const { data: res } = await getNewTokenAPI()
			// 重置本地token
      setToken({ token: res.data.token })
			// 为了使触发error的本次请求继续生效，需要重新给这个请求添加token
      error.config.headers.Authorization = `Bearer ${getToken()}`
			// 将第一请求重新发送出去
      return axios(error.config)
    } else {
 // 用户有感
      removeToken()	// 清除本地token
      router.replace('/login')	// 返回登录页面
      Notify({ type: 'warning', message: '身份过期' })	//提示	-- 这里是vant提示组件
    }
  }
  return Promise.reject(error)	// 判断中中途没return的统一抛出错误
}
)