关于401状态码的含义和处理方式_相关技巧

来源:脚本之家  责任编辑:小易  
目录
401状态码的含义和处理401状态码的含义401状态码的处理401状态码升级处理401状态码相关处理示例代码1 示例代码2

401状态码的含义和处理

401状态码的含义

axios向服务器端发送请求时,有两种情况会出现401状态码(unauthorized未授权):

1. 服务端要求传递token信息,而实际发送请求时没有传递。

2. 发送请求时有传递token到达服务器端,但由于时间比较久,这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。

总之,服务器端有些api接口要求传递token,token失效或没有传递,就会报401错误。

401状态码的处理

1. 在axios请求拦截器中做token传递操作。

2. 可以这样设置,在axios响应拦截器中判断请求状态如果是401,就强制用户重新登录系统。

第2种情况处理实现:

在axios的响应拦截器中,判断错误码等于401就强制登录(utils/ax.js)

// 引入路由
import router from '@/router'
// 配置响应拦截器
axios.interceptors.response.use(function (response) {
? // 正常响应处理
? return response
}, function (error) {
? // 非正常响应处理(包括401)
? // console.dir(error) // 对象: config request response isAxiosError toJSON
? if (error.response.status === 401) {
? ? // token失效(token在服务器端已经失效了,2个小时时效)
? ? // 强制用户重新登录系统,以刷新服务器端的token时效
? ? router.push('/login')
? ? // 不要给做错误提示了
? ? return new Promise(function () {}) // 空的Promise对象,没有机会执行catch,进而不做错误提示了
? }
? // return new Promise((resolve,reject)=>{
? // reject('获得文章失败!')
? // })
? return Promise.reject(error)
})

注意:

1. 路由对象.push(xxx) 可以实现编程式导航。

2. 路由对象:在组件中是 this.$router ,在main.js/ax.js文件中就是router对象(需要import导入)。

模拟服务器端token失效步骤:

1. 删除客户端sessionStorage数据。

2. 暂时屏蔽守卫代码(开发完毕再打开)。

401状态码升级处理

401状态码

axios向服务器端发送请求时有两种情况会出现401状态码(unauthorized未授权):

1. 服务端要求传递token信息,而实际没有传递。

2. 有传递token到达服务器端,但由于时间比较久,这个token在服务器中已经过期了(服务器存储token有效期时间为2个小时)。

总之,服务器端有些api接口要求传递token,token失效或没有传递,就会报401错误。

相关处理

1. 第1种情况,可以在axios请求拦截器中做token传递操作。

2. 第2种情况,之前是这样处理的,在axios响应拦截器中判断请求状态如果是401,就强制用户重新登录系统

这样处理用户体验非常不好,现在做一次升级优化处理。 

服务器端返回两个秘钥信息,它们在服务端都有使用时效:

token 有效期2小时。refresh_token 有效期14天,refresh_token用于在token过期后,重新获取并刷新token时效使用的。

针对第2种401状态码处理步骤为:

1. 判断refresh_token是否存在

不存在就直接重新登录。

存在,axios发起请求,带着refresh_token请求服务端,获取新token出来:

成功:对vuex和localStorage进行token信息更新。

失败:清空无效用户信息,直接重新登录。

示例代码1 

// 响应拦截器 (响应成功:剥离无效数据,响应失败:刷新token)
instance.interceptors.response.use(res => {
  // 将来获取数据:res.data.data 麻烦
  // 想要结果:data 即可
  try {
    return res.data.data
  } catch (e) {
    return res
  }
}, async err => {
  try {
    // 目的:刷新token
    if (err.response && err.response.status === 401) {
    // 未登录  跳转登录页面  阻止程序运行
      const { user } = store.state
      // 如果没有token没登录  如果没有refresh_token无法刷新token
      if (!user.token || !user.refresh_token) {
        router.push('/login')
        return Promise.reject(err)
      }
      // 刷新token,发请求,没有配置的axios,自己配置refresh_token
      const res = await axios({
        url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
        method: 'put',
        headers: {
          Authorization: `Bearer ${user.refresh_token}`
        }
      })
      // token获取  res.data.data.token
      // 更新 vuex 和 本地 token
      store.commit('setUser', {
        token: res.data.data.token,
        refresh_token: user.refresh_token
      })
      // 继续发送刚才错误的请求
      // instance({之前错误的请求配置})
      // err错误对象 包含(response 响应对象 |config 请求配置)
      return instance(err.config)
    }
  } catch (e) { // exception 异常
    // 刷新token失败
    router.push('/login')
    return Promise.reject(e)
  }
  return Promise.reject(err)
})

演示代码:promise错误处理:

示例代码2

import store from '@/store' // 引入vuex中的store实例
import router from '@/router' // 引入路由对象实例
……
// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    try {
      // 返回具体有价值的业务数据
      return response.data.data
    } catch (error) {
      return response.data
    }
  },
  async function (error) {
    // 响应有错误,有可能错误状态码为401
    if (error.response && error.response.status === 401) {
      // 定义登录路由对象
      let toPath = {
        name: 'login',
        query: { redirectUrl: router.currentRoute.path }
      } // 跳转对象
      // 如果refresh_token不存在
      if (!store.state.user.refresh_token) {
        router.push(toPath)
        return Promise.reject(error)
      }
      try {
        // 刷新用户token
        // 应该发送一个请求 换取新的token
        // 这里不应该再用instance  因为 instance会再次进入拦截器  用默认的axios
        let result = await axios({
          method: 'put',
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          headers: {
            Authorization: `Bearer ${store.state.user.refresh_token}`
          }
        })
        // 获取到新token后,就对vuex和localStorage进行更新
        store.commit('updateUser', {
          token: result.data.data.token, // 拿到新的token之后
          refresh_token: store.state.user.refresh_token // 将之前 refresh_token 14天有效期
        })
        return instance(error.config) // 把刚才错误的请求再次发送出去 然后将promise返回
      } catch (err) {
        // 如果错误 表示补救措施也没用了(有可能refresh_token也失效了)
        // 应该跳转到登录页 并且 把废掉的用户信息全都干掉
        store.commit('clearUser') // 所有的用户信息清空
        router.push(toPath) // 跳转到回登录页
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)
') // 所有的用户信息清空
        router.push(toPath) // 跳转到回登录页
        return Promise.reject(err)
      }
    }
    return Promise.reject(error)
  }
)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持真格学网。 

您可能感兴趣的文章:http 200、301、304等状态码详解

  • 本文相关:
  • 详解git reset --hard 和 git reset --soft区别
  • 各种编程语言中$符号的意义
  • vscode的使用配置以及vscode插件的安装教程详解
  • 详解hadoop2.7.2 编译64位源码
  • 完美解决浏览器输入http被自动跳转至https问题
  • vscode 一键规范代码格式的实现
  • vs2019无法启动程序(系统找不到指定文件)解决办法
  • 比较全的获得ip地理信息的几种方法小结
  • web 开发常用工具 大家自己查找下载
  • 2013年cio需要知道的八句格言
  • 错误码401是什么意思?
  • 快递三段码是什么?三段码401
  • 手机调用服务失败,http状态码502是什么意思?
  • 中国移动魔百盒出现错误码 401是什么原因?
  • 美码7.5,欧码401/3是什么码数?
  • 热处理后硬度40一46HRC,hrc什么意思?
  • 10多年车的125摩托车f401机头码的是什么牌子的车,铃木还是豪...
  • HTTP 状态码表示什么意思?
  • 关于青海卧式加工中心XH754---401的报警处理问题
  • 401错误代是什么意思码
  • HTTP协议中状态码的含义
  • http和https响应的状态码有哪些
  • 常见HTTP状态码有哪些?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页相关技巧详解git reset --hard 和 git reset --soft区别各种编程语言中$符号的意义vscode的使用配置以及vscode插件的安装教程详解详解hadoop2.7.2 编译64位源码完美解决浏览器输入http被自动跳转至https问题vscode 一键规范代码格式的实现vs2019无法启动程序(系统找不到指定文件)解决办法比较全的获得ip地理信息的几种方法小结web 开发常用工具 大家自己查找下载2013年cio需要知道的八句格言2019最新的pycharm激活码(推荐)vscode检测到#include错误请更新includep从console.log说起(console.log详细介绍分享最新sublime text4 build 4107注册进制转换算法原理(二进制 八进制 十进制 十六进制)eclipse 格式化代码时不换行与自动换行的实现方法微信小程序设置http请求的步骤详解抓包工具fiddler的使用方法详解(fiddler中文教程git下载与环境变量配置方法stringbuider 在什么条件下、如何使用效率更高iis 301重定向与程序代码实现301重定向的差别使用 conditional menus 插件让 wordpress 在不同解析scratch3.0二次开发之scratch-blocks免编译修改问题idea集成git实现团队合作分工的原理详解url编码表一览(推荐收藏)码云git图文使用详解教程vscode 使用settings sync同步配置(最新版教程,非常简单)关于idea向github push代码时一直重复提示输入用户名和密码的问题
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved