账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue拦截response刷新token,axios调用没有反应
    34
    0

    用下面的代码来做刷新token,后端用的django-reset-framework-jwt,用postman验证过了http://127.0.0.1:8000/api/token/refresh/,没有问题,但是前端token到期刷新时,getRefreshToken函数打印了current_token之后就没有下文了,后端也没有显示收到刷新token的请求,getRefreshToken函数里面执行的axios既不能拿到新的token,也不报错:

    import axios from 'axios'
    import store from '../store'
    import { Message, MessageBox } from 'element-ui'
    import { getToken, setToken, removeToken } from '@/utils/auth'
    
    
    
    // 创建axios实例
    const service = axios.create({
      baseURL: 'http://127.0.0.1:8000', // api的base_url
      timeout: 1500000 // 请求超时时间
    })
    
    function getRefreshToken() {
      console.log('try to refresh token...')
      console.log('current_token:', store.getters.token)
      params = {'token': store.getters.token}
      return axios.post('http://127.0.0.1:8000/api/token/refresh/', params)
    }
    
    // request拦截器
    service.interceptors.request.use(config => {
      if (store.getters.token) {
        config.headers['Authorization'] = 'JWT ' + store.getters.token // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, error => {
      // Do something with request error
      console.log(error + "1.40") // for debug
      Promise.reject(error)
    })
    
    
    // respone拦截器
    service.interceptors.response.use(
      response => response,
      error => {
        console.log('error:' + error) // for debug
        if (error.response) {
          console.log("error.response", error.response);
          console.log('error code: ' + error.response.status);
          console.log('error text: ' + error.response.statusText);
          if (error.response.status === 401 && error.response.config && !error.response.config.__isRetryRequest) {
            console.log('ACCESS TOKEN EXPIRED!');
            return getRefreshToken()
              .then(function(res) {
                console.log('TOKEN RECEIVED', res);
                setToken(res.data.token)
                store.commit('SET_TOKEN', res.data.token)
                error.response.config.__isRetryRequest = true;
                error.response.config.headers.Authorization = 'Authorization ' + res.data.token;
                return axios(error.response.config);
              })
              .catch(function() {
                console.log('Refresh login error: ', error);
                throw error;
              });
          }
          // throw error;
        }
        return Promise.reject(error)
      }
    )
    
    export default service
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 一首歌的时间 普通会员 1楼

      在Vue中,可以使用axios拦截器来阻止请求刷新token。首先,你需要在axios配置文件中设置token默认的验证规则,例如:

      javascript axios.interceptors.request.use(function (config) { // 添加请求头的token验证规则 if (!config.headers['token']) { throw new Error('Token required'); } return config; }, function (error) { // 添加错误处理 if (error.response) { return error.response.data; } else { return Promise.reject(error); } });

      然后,你可以使用axios.get()或axios.post()等方法来发送请求,而不是使用axios.get()或axios.post()的方法来发送刷新token请求。例如:

      javascript axios.get('/api/token', { headers: { 'token': 'your_token' } }) .then(function (response) { // 在这里处理响应 }) .catch(function (error) { // 在这里处理错误 });

      这样,你就可以阻止请求刷新token了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部