给axios的请求拦截器中配置token

axios

1. 配置token

用户第一次登录系统时，服务器端会返回一个身份秘钥信息(token)，表明当前用户有资格、权限访问服务器，客户端获取token之后，通过sessionStorage存储在浏览器中，后续再向服务器发送请求时，需要携带token，用以表明身份。

给axios请求拦截器中配置token

• 在axios的请求拦截器中配置token：

// 请求拦截器
axios.interceptors.request.use(function (config) {
  // 发送请求的相关逻辑
  // config:对象  与 axios.defaults 相当
  // 借助config配置token
  let userinfo = window.sessionStorage.getItem('userinfo')
  // 判断token存在再做配置
  if (userinfo) {
    let token = JSON.parse(userinfo).token
    // 注意：token前边有 'Bearer ' 的信息前缀,API接口需求，Bearer后边有空格
    config.headers.Authorization = 'Bearer ' + token
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

注意：

1. 浏览器中并不是始终存在userinfo的用户信息的，也并不是每次请求都要传递token秘钥信息，

   故要把包含着token的userinfo获得出来，判断存在再赋予给axios，不做判断贸然使用会有错误

• 浏览器查看传递token的效果：

• 如果token秘钥没有配置好，发送需要token权限的相关axios请求会报如下401错误信息：

2.axios提取为独立文件

把axios相关代码从main.js中提取出来形成独立文件：

main.js文件是项目的主入口文件，非常重要，里边的内容如果比较多，会造成后期升级、维护困难度增加，

现在要把axios繁琐的代码提取到一个独立文件中，之后在main.js中引入使用。

步骤：

1. 创建src/utils/ax.js文件，从main.js中把axios相关代码提取出来：

   // 独立文件，用于存储axios相关代码
   
   // 导入Vue模块，需要另行独立引入Vue
   import Vue from 'vue'
   // 导入axios模块
   import axios from 'axios'
   // 配置公共根地址(线上地址)
   axios.defaults.baseURL = 'http://ttapi.research.itcast.cn/'
   // 配置为Vue的继承成员
   Vue.prototype.$http = axios
   
   // 请求拦截器
   axios.interceptors.request.use(function (config) {
     // 发送请求的相关逻辑
     let userinfo = window.sessionStorage.getItem('userinfo')
     // 判断token存在再做配置
     if (userinfo) {
       let token = JSON.parse(userinfo).token
       config.headers.Authorization = 'Bearer ' + token
     }
     return config
   }, function (error) {
     return Promise.reject(error)
   })
   

2. main.js引入独立的axios代码文件

   // 引入axios相关
   import '@/utils/ax.js'
   

注意：

1. ax.js文件要被main.js导入进来。

   // 引入axios相关
   import '@/utils/ax.js'

注意：

1. ax.js文件要被main.js导入进来。
2. 虽然两个文件(main.js 和 ax.js)都有引入Vue，但是系统中会识别为一个Vue对象，只是运行在不同文件中而已。

本文地址：https://blog.csdn.net/jyn15159/article/details/108870977