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

2023-09-05 12:14| 来源: 网络整理| 查看: 265

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对象，只是运行在不同文件中而已。

【本文地址】

公司简介

联系我们