axios

1. 配置token

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

给axios请求拦截器中配置token

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

// 请求拦截器
axios.interceptors.request.use(function (config) {// 发送请求的相关逻辑// config:对象  与 axios.defaults 相当// 借助config配置tokenlet 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 errorreturn 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).tokenconfig.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对象，只是运行在不同文件中而已。

给axios的请求拦截器中配置token相关推荐

axios请求拦截器的配置
import axios from "axios"; let http = axios.create({baseURL: "/api", //配置默认的地址wi ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
vue 请求拦截器配置
按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置请求拦截器有一个Authorization认证,判断登录状态之后再决定 ...
axios请求拦截器
main.js中添加axios请求前拦截器.接受拦截器 import axios from 'axios'// 添加请求拦截器,在请求头中加token,Cookie axios.interceptor ...
axios拦截器_请求拦截器_响应拦截器---axios工作笔记010
然后我们再去看看axios的,请求拦截器,和响应拦截器. 先说一下这个,拦截器的原理,其实就是我们发送一个请求,这个请求在发出去之前,我们的请求拦截器,先去拦截一下,拦截的时候可以对请求数据做一些处 ...
Vue http request 请求拦截器
目的:统一配置请求信息及错误处理好处:方便 // 1.添加 http request 请求拦截器,有token值则配置上token值 axios.interceptors.request.use( ...
为什么你写的拦截器中不能注入Java bean？
一.如何实现拦截器在Spring Boot项目中,拦截器经常被用来做登陆验证,日志记录等操作.拦截器是Spring提供的,所以可以将拦截器注成bean,由IOC容器来管理.实现拦截器的方式很简单,主 ...
前端获取不到后端在拦截器中设置的响应头
前言: 最近后端在做验token时遇到一个问题,两个前端项目分别使用Vue和Angular.两个项目token产生和验签规则是一样的(流程:后端Java在拦截器中验token,如果验签成功刷新toke ...
如何使用 Axios 中的请求拦截器和响应拦截器
Axios 是一个常用的 JavaScript 库,用于发送 HTTP 请求和处理响应.在网站设计中,我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求,例如添加认证信息.处理错误信 ...

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

axios

1. 配置token

2.axios提取为独立文件

给axios的请求拦截器中配置token相关推荐

最新文章

热门文章