给axios的请求拦截器中配置token
axios1. 配置token用户第一次登录系统时,服务器端会返回一个身份秘钥信息(token),表明当前用户有资格、权限访问服务器,客户端获取token之后,通过sessionStorage存储在浏览器中,后续再向服务器发送请求时,需要携带token,用以表明身份。给axios请求拦截器中配置token在axios的请求拦截器中配置token:// 请求拦截器axios.interceptors
·
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)
})
注意
:
-
浏览器中并不是始终存在userinfo的用户信息的,也并不是每次请求都要传递token秘钥信息,
故要把包含着token的userinfo获得出来,判断存在再赋予给axios,不做判断贸然使用会有错误
- 浏览器查看传递token的效果:
- 如果token秘钥没有配置好,发送需要token权限的相关axios请求会报如下401错误信息:
2.axios提取为独立文件
把axios相关代码从main.js中提取出来形成独立文件
:
main.js文件是项目的主入口文件,非常重要,里边的内容如果比较多,会造成后期升级、维护困难度增加,
现在要把axios繁琐的代码提取到一个独立文件中,之后在main.js中引入使用。
步骤
:
-
创建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) })
-
main.js引入独立的axios代码文件
// 引入axios相关 import '@/utils/ax.js'
注意
:
- ax.js文件要被main.js导入进来。
// 引入axios相关
import '@/utils/ax.js'
注意
:
- ax.js文件要被main.js导入进来。
- 虽然两个文件(main.js 和 ax.js)都有引入Vue,但是系统中会识别为一个Vue对象,只是运行在不同文件中而已。
更多推荐
已为社区贡献7条内容
所有评论(0)