Vue/React项目实现axios请求拦截器注入token

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React框架$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

本文被专栏【React–从基础到实战】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

项目需求：需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

localStorage与sessionStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

axios请求拦截器注入token

本节目标: 把token通过请求拦截器注入到请求头中

拼接方式：config.headers.Authorization = Bearer ${token}}

这里的拼接方式，一般都由后端人员指定。

1. React项目中

在utils工具文件夹中书写封装http。
utils/http.js

import axios from 'axios'
const http = axios.create({
  baseURL: 'http://geek.itheima.net/v1_0',
  timeout: 5000
})
// 添加请求拦截器
http.interceptors.request.use(config => {
  const token = window.sessionStorage.getItem('pc-key')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  // 在最后必须return config
  return config
})

代码解释：
第一次发起请求，是登录请求，此时，sessionStorage中没有token，getItem获取不到，不走下面这个if函数体，直接return config；


后面再发请求时，由于已经登录了，此时，sessionStorage中有token，getItem获取到了，走if中的函数体，在发起请求前自动进行预处理，追加一个token，以便于访问需要权限的页面


为请求头对象(headers)中添加token验证的自定义字段(Authorization)


作用是为了让需要验证才能使用的API能够使用(请求头中携带了token值则可通过验证)

2. Vue项目中

在main.js项目入口文件中

1.引入axios

import axios from 'axios'

2.为axios设置请求根路径

axios.defaults.baseURL = 'http://geek.itheima.net/v1_0'

3.将token令牌保存到浏览器的sessionStorage中
示例：

 // 1.将登录成功之后的token，保存到客户端的sessionStorage中
   //      1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
   //      1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
window.sessionStorage.setItem('token', res.data.token)
//将res.data.token赋值给sessionStorage中的token
 // 2.通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')

4. 设置axios请求拦截器
   目的是让每次发起ajax异步请求之前对axios进行一次预处理，将token令牌赋予axios

// axios请求拦截器 => interceptors 在页面发送请求前进行一次预处理
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在发起axios请求前自动进行预处理，追加一个token，以便于访问需要权限的页面
  // 为请求头对象(headers)中添加token验证的自定义字段(Authorization)
  // 作用是为了让需要验证才能使用的API能够使用(请求头中携带了token值则可通过验证)
  // 在最后必须return config
  return config
})