欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t 框架 React框架 React框架🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客
😇本文目录😇
localStorage与sessionStorageaxios请求拦截器注入token1. React项目中2. Vue项目中本文被专栏【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: '/v1_0',timeout: 5000})// 添加请求拦截器http.interceptors.request.use(config => {const token = window.sessionStorage.getItem('pc-key')if (token) {config.headers.Authorization = `Bearer ${token}`}// 在最后必须return configreturn 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 = '/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.通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push('/home')
设置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 configreturn config})
