【token】刷新token,替换请求头

token过期,用refreshToken 去刷新 token

处理: 在每一个请求之前,都去请求刷新token的接口,这里在axios里面用的ajax,因为在axios里面用到了响应拦截,如果还用axios,就会陷入死循环。因为涉及到一个页面刚进入,会去请求多个接口,造成 一个页面刚进入会请求多个token接口,所以 用到

防抖、节流,这些都是在axios的请求拦截器里面进行处理的。

let dounceNum = 1;
axios.interceptors.request.use(function (config) {
  let token = Cookies.get('token');
  let userid = Cookies.get('userid');
  // let refreshToken = Cookies.get('refreshToken');
  // let userName = Cookies.get('userName');
  if (dounceNum == 1) {
    $.ajax({
      type: 'post',
      url: config.baseURL + '/isc/auth/token',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Authorization': 'Bearer ' + Cookies.get('refreshToken')
        // 'ticket': store.getters.User.ticket || '',
        // 'locale': i18n.locale || ''
      },
      contentType: "json",
      dataType: "json",
      data: JSON.stringify({ 'userid': Cookies.get('userid') }),
      cache: false,
      async: false,
      success: function (res) {
        // console.log(res)
        if (res.code == '00000000') {
          Cookies.set('token', res.data.token);
          Cookies.set('refreshToken', res.data.refreshToken);
          let token = Cookies.get('token');
          // console.log('token1', token)
          config.headers['X-Authorization'] = `Bearer ${token}`;
        } else {
          // Message.error('登陆信息已失效,请重新登陆')
        }
      }
    });
  } else {
  }
  setTimeout(() => {
    dounceNum = 1
  }, 1000)

  dounceNum = dounceNum + 1;

  if (token && userid) {
    // console.log('99999')
    if (config.url === 'isc/auth/token') {
      let refreshToken = Cookies.get('refreshToken');
      config.headers['X-Authorization'] = `Bearer ${refreshToken}`;
      config.headers.common['X-Authorization'] = `Bearer ${refreshToken}`;
    } else {
      let token = Cookies.get('token');
      // console.log('token2', token)
      config.headers['X-Authorization'] = `Bearer ${token}`;
      config.headers.common['X-Authorization'] = `Bearer ${token}`;
    }
  } else {
    if (token === null || userid === null) {
      router.replace({
        path: '/login'
      })
    }
  }
  // console.log(config.headers)
  return config
}, function (error) {
  return Promise.reject(error)
});

中途需要注意点:1、 ajax 只能是同步请求, 异步的话, 就算拿到新的token,也因为响应问题,不会去替换请求头

                             2、替换请求头的时候,使用 config.headers['X-Authorization'] = `Bearer ${token}`;有效!

                                                  之前的写法是:config.headers.common['X-Authorization'] = `Bearer ${token}`; 无效!

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中,可以使用拦截器来实现刷新token的功能。具体步骤如下: 1. 在uniapp项目中创建一个文件夹,例如:”interceptor”。 2. 在该文件夹中创建一个js文件,例如:”index.js”。 3. 在index.js中,导出一个对象并定义一个“request”拦截器。 4. 在“request”拦截器中,判断是否需要刷新token。如果需要刷新token,则发送请求获取新的token,并用新的token替换原有的token,再继续发起原有的请求。 5. 在“request”拦截器中,如果发现token已经过期,则发起请求刷新token,并将新的token保存在本地缓存中。 6. 在uniapp的main.js中,将上述拦截器应用到所有的请求中。 示例代码如下: // interceptor/index.js import { getToken, setToken } from '@/utils/token' export default { request: function (config) { // 在发送请求之前做些什么 const token = getToken() if (token) { // 如果存在token,则设置请求中的Authorization字段 config.header.Authorization = token } return config; }, response: function (res) { // 在请求成功后做些什么 if (res.data.code === 401) { // token过期了 return refreshRequest(res) } else { return res; } }, error: function (err) { // 对请求错误做些什么 return Promise.reject(err); } } function refreshRequest (res) { return new Promise((resolve, reject) => { // 刷新token uni.request({ url: 'http://xxx.com/refresh', method: 'POST', header: { 'Content-Type': 'application/json' 'Authorization': getToken() }, success: (res) => { if (res.data.code === 0) { // 刷新token成功 const newToken = res.data.data.token setToken(newToken) // 保存新的token // 将新的token替换原有的token res.config.header.Authorization = newToken // 再次发起原有的请求 resolve(uni.request(res.config)) } else { // 刷新token失败 reject(res) } }, fail: (err) => { reject(err) } }) }) } // main.js import interceptor from '@/interceptor' // 应用拦截器 uni.addInterceptor(interceptor) // utils/token.js const TOKEN_KEY = 'token' export function getToken () { return uni.getStorageSync(TOKEN_KEY) } export function setToken (token) { uni.setStorageSync(TOKEN_KEY, token) }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值