欢迎来到我的博客
📔博主是一名大学在读本科生,主要学习方向是前端。
🍭目前已经更新了【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})