token过期 如何使用refresh_token实现无感刷新页面?升级版
login.vue
<template>
<div>
御剑乘风来,除魔天地间!===login
<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>
</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)
console.log(res, 88);
localStorage.setItem('token', JSON.stringify(res.data))
this.$router.push('/user')
}
}
}
</script>
<style lang='less' scoped>
</style>
user.vue
<template>
<div>
御剑乘风来,除魔天地间!===user
姓名:{{ 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
import axios from "axios";
var instance = axios.create({
baseURL: "http://toutiao.itheima.net/v1_0",
timeout: 5000,
});
const requestFreshToken = axios.create({
baseURL: "http://toutiao.itheima.net/v1_0",
timeout: 5000,
});
instance.interceptors.request.use(
function (config) {
let tokenObj = JSON.parse(localStorage.getItem("token"));
if (tokenObj && tokenObj.token) {
config.headers.Authorization = "Bearer " + tokenObj.token;
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
instance.interceptors.response.use(
function (response) {
return response.data;
},
async function (error) {
if (error.response.status === 401) {
let tokenObj = JSON.parse(localStorage.getItem("token"));
const res = await requestFreshToken({
method: "PUT",
url: "/authorizations",
headers: {
Authorization: "Bearer " + tokenObj.refresh_token,
},
});
localStorage.setItem(
"token",
JSON.stringify({
token: res.data.data.token,
refresh_token: tokenObj.refresh_token,
})
);
return instance(error.response.config);
}
return Promise.reject(error);
}
);
export default instance;
router/index.js
{
path: "/",
component: () => import("../tokens/login.vue"),
name: "login",
},
{
path: "/user",
component: () => import("../tokens/user.vue"),
name: "user",
},
api/use.js
import request from "@/utlis/request.js";
export const loginApi = (data) => {
return request({
method: "post",
url: "/authorizations",
data,
});
};
export const userApi = () => {
return request({
url: "/user",
});
};