直接上代码
首先准备两个工具文件
ps:文件名可以随便取哈,尽量有语义化一点即可
login.vue
<template>
<div>
<form>
手机号: <input v-model="form.mobile" type="text" name="" id="" /><br />
验证码: <input v-model="form.code" type="text" name="" id="" /><br />
<input type="button" value="登录" @click="login" />
<!-- =={
{ form }} -->
</form>
</div>
</template>
<script>
import { loginApi } from '@/api/user'
export default {
name: '',
data () {
return {
form: {
mobile: '13455555555',
code: '246810'
}
}
},
created () {},
computed: {},
methods: {
async login () {
const res = await loginApi(this.form)
localStorage.setItem('token', JSON.stringify(res.data))
this.$router.push('/user')
}
}
}
</script>
<style lang='less' scoped>
</style>
user.vue
<template>
<div>
姓名:{
{ userInfo.name }}
<img style="width: 100px" :src="userInfo.photo" alt="" />
</div>
</template>
<script>
import { userApi } from '@/api/user'
export default {
name: '',
data () {
return {
userInfo: {}
}
},
created () {
this.getUser()
},
computed: {},
methods: {
async getUser () {
const res = await userApi()
this.userInfo = res.data
}
}
}
</script>
<style lang='less' scoped>
</style>
重点来了准备一个request.js文件
多说无益,思路都在代码里面,按顺序的一步一步来即可
// 1. 导入axios包
import axios from 'axios'
// 2. 创建一个axios实例
const instance = axios.create({
baseURL: 'http://toutiao.itheima.net/v1_0',
timeout: 5000
})
// 7. 创建一个新的axios实例
const requestFreshToken = axios.create({
baseURL: 'http://toutiao.itheima.net/v1_0',
timeout: 5000
})
// 3. 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 5. 在发送请求之前做些什么
// 5.1 获取点击登录后的token
const tokenObj = JSON.parse(localStorage.getItem('token'))
if (tokenObj && tokenObj.token) {
// 5.2 设置请求头
config.headers.Authorization = 'Bearer ' + tokenObj.token
}
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 4. 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response.data
},
async function (error) {
// console.log(error.response, 222);
// 6. 当token失效时
if (error.response.status === 401) {
// 6.1 解决token过期的问题
const tokenObj = JSON.parse(localStorage.getItem('token'))// 与5.1一致 可以直接写在外面(全局)
// 7.1 重新发送一次请求,设置一个新的请求头freshToken
const res = await requestFreshToken({
method: 'PUT',
url: '/authorizations',
headers: {
Authorization: 'Bearer ' + tokenObj.refresh_token
}
})
// 7.2 重新设置token和freshToken
localStorage.setItem(
'token',
JSON.stringify({
token: res.data.data.token,
refresh_token: tokenObj.refresh_token
})
)
// 8.这里重新发送请求后 使用的是request 又会走上面的请求拦截 又会重新携带刚刚存的新的token
return instance(error.response.config)
}
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default instance