一、axios
在vue中啊 我们不需要去用原生XHR去发 ajax ，因为啊 原生js写起来比较繁琐，并不易我们去开发， 我们可以通过axios 去发ajax？看到axios不要觉得新词就很陌生
官网： axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
复习 axios二次封装 跳转链接
二、请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
先知道请求拦截器啊并不是说对请求进行了拦截不让去请求 ，其实目的是在发送请求前进行操作，比如啊 我们在请求头添加token，我们在请求拦截器中添加啊，所有的请求都会经过请求拦截器，是不是不用我们手动挨个去加了，这也是最常用的使用场景了
// 请求拦截器1
instance.interceptors.request.use(function (config) {
config.header.xxxx1 = 1000
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 请求拦截器2
instance.interceptors.request.use(function (config) {
config.header.xxxx2 = 'abc'
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})发送请求中 请求头中除了添加token 也可以添加其他的 上面的代码只是例子，添加后并无作用
案例 请求头(headers)中携带token例子：
import axios from 'axios' //引入 axios
import store from '../store/index' //vuex数据
import router from '../router/auth' // 路由
export const request1 = axios.create({ //创建一个axios实例
baseURL: 'http://localhost:8000'
})
// 添加请求拦截器
request1.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// console.log(config)
const token = store.state.tokenInfo.token //获取vuex中的token
if (token) {
config.headers.Authorization = `Bearer ${token}` //如果有token 就在请求头上添加token
}
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})拦截器写在基地址哦 上面引入一些模块和包 为了更好理解 注意token是在vuex里获取的 也可以通过localStorage中进行获取哦 回顾知识点token持久化
三、响应拦截器
所有从后端响应回来的数据都会进入响应拦截器里 ，我们可以在响应拦截器里去进行操作，通常判断token失效
基本写法
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});案例 401问题
1. 什么时候出现401 ？ token过期在进行用户操作，token一般都会有时间限制，比如十二小时后token过期 过期后的token再去权限操作就会报出401错误
2.模拟token失效 对于token失效我们不能干等12小时 这也太漫长了，但是我们可以模拟token失效 通过修改vuex 里的token 因为vuex中的token是响应式的 我们只需要对齐进行修改，注意不要刷新！！（刷新后token又重新获取了）
模拟token失效 在vuex中 删除token中的几个字符就可以模拟token失效 ， 因为我下次操作肯定 还会发请求 下次带着错误的token和失效一个道理
3. refresh_token 我们在图中看到了refresh_token(这也是后端提供给我们的,保存在了vuex里，接下来讲他是起到什么作用)
(1) 如果token失效后 例如失效期是一小时 用户发现突然操作没有权限了 只能去重新登录 重新获取token 这是对用户非常不好的体验，每次一小时都要重新登录一次，用户骂骂咧咧的删除了网页
(2) 所以啊 这时候refresh_token的作用来了，它的作用呢也可以作为用户的令牌，token失效后，我们可以通过refresh_token去重新获取token 当然这些操作都是报了401错误在响应拦截器里操作的，对于refresh_token可以通过响应拦截器做到 用户无感的体验 让用户感觉不到任何 操作，但是背后的程序员付出了很多， 哎 果然用户体验的背后都有一个伟大的程序员， 当然他也是有时间限制的 一般为7天/14天当然也是后端设置的
(3)这里啊有个疑问 为什么不能直接设置14天 或者永久呢 搞这么麻烦？ 个人理解的是 如果token呢一直一样 那也就失去了保留token 的意义所在，那我还要token干嘛，所以呢第一点 是保证token不被盗取，能够保证用户的安全性更高，第二点也差不多，因为refresh_token是去请求后端的，这也是请求后能告诉后台用户在连接，能够得到响应。（希望大家看到能补充一最好）
4. 接下来先看一张具体的流程图(有 · 复杂哦，仔细看)
具体步骤
对于某次请求A，如果是401错误 （2）
- 有refresh_token，用refresh_token去请求回新的token （3）
- 新token请求成功 （4）
- 更新本地token （5）
- 再发一次请求A （6）
- 新token请求失败
- 携带请求地址，跳转到登陆页
- 没有refresh_token，说明没有登陆
- 携带请求地址，跳转到登陆页
转换为代码 为了更好理解 把每一句的注释写在后面 (仔细看很好理解，别觉得多一扫而过)
import store from '../store/index'
import router from '../router/auth'
request1.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, async function (error) {
// 对响应错误做点什么
console.dir(error)
const refreshToken = store.state.tokenInfo.refresh_token // 拿到refres_token 定义变量不能和引入的变量名重复 例如 const store
if (error.response.status === 401) { // 在error对象中 可以看到状态 是否为401
if (refreshToken) {
// 1. token 过期的情况 判断如果有refreshToken 去发ajax
try {
const res = await axios({
url: 'http://localhost:8000/v1_0/authorizations',
method: 'PUT',
headers: { // headers 不能按接口文档抄 H不能大写！！！！
Authorization: `Bearer ${refreshToken}`
}
})
const newToken = res.data.data.token // 拿到新的token再去发请求
console.log(newToken)
// 发请求调用vuex的mutations
store.commit('setTokenInfo', { token: newToken, refresh_token: refreshToken }) // 这里的token 和 refresh_token要和之前定义变量匹配(vuex中)
return request1(error.config) // 哪里发请求就在哪调用 这里指的是只是修改了新的token 并没有修改error其他的值 只是重新发请求
} catch (error) {
// 2. refreshToken 也过期了 但是登录着呢 但是之前的已经登录已经跳不过去了 所以要设置为空 （这里之前设置过登录用户无法访问登录页 ）
store.commit('setTokenInfo', {}) // 传一个空的token就可以了
// encodeURIComponent 因为我们在路由传参的时候遇见&符后面的参数不能转码 所以我们要把整句转换成编码形式
// 下面代码解释 例如我从文章页进行操作 没有token自动跳到登录页 登录之后用户想的是继续访问文章页 并不是想访问主页 所以我们就要保存刚才的路径
// 通过'login?参数='+刚才的路径地址 这样登录页面就能拿到参数 登陆成功后进行跳转 this.$router.push(this.$route.query.returnUrl || '/')
router.push('/login?returnUrl=' + encodeURIComponent(router.currentRoute.fullPath)) // router.currentRoute 相当于 vue中的$route
return Promise.reject(new Error('refresh_token清空')) // 抛出错误不然会可能提示执行成功
}
} else { // 3. 如果没有refresh_token 去登录 和上面同样的操作
console.log('未获取到refreshToken,所以要去登录')
store.commit('setTokenInfo', {})
router.push('/login?returnUrl=' + encodeURIComponent(router.currentRoute.fullPath)) // router.currentRoute 相当于 vue中的$route
return Promise.reject(new Error('refresh_token不存在'))
}
}
})挪出一部分作为笔记哈 也是常见不会写或者错误
1. router.currentRoute 相当于 vue中的$route
2. headers: { // headers 不能按接口文档抄 H不能大写！！！！
Authorization: `Bearer ${refreshToken}`
}3. store.commit('setTokenInfo', { token: newToken, refresh_token: refreshToken }) // 这里的token 和 refresh_token要和之前定义变量匹配(vuex中)
4. encodeURIComponent 因为我们在路由传参的时候遇见&符后面的参数不能转码 所以我们要把整句转换成编码形式
// 下面代码解释 例如我从文章页进行操作 没有token自动跳到登录页 登录之后用户想的是继续访问文章页 并不是想访问主页 所以我们就要保存刚才的路径
// 通过'login?参数='+刚才的路径地址 这样登录页面就能拿到参数 登陆成功后进行跳转 this.$router.push(this.$route.query.returnUrl || '/')
router.push('/login?returnUrl=' + encodeURIComponent(router.currentRoute.fullPath)) // router.currentRoute 相当于 vue中的$route
5. return request1(error.config) // 哪里发请求就在哪调用 这里指的是只是修改了新的token
有了上面的操作 啊 token失效后 又去拿refresh_token又去请求了一遍 ，最后请求过来的数据拿到最新的token ，再去保存到vuex中，然后再去进行操作 return request1(error.config) 这句话不要以为error就是表示错误信息，它里面其他的信息没变，我们只是重新获取了token ，重新发了一遍请求，当然是哪里调用就在哪里重新请求，最主要的一句就是 让用户无感！！！！！
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
