login.vue
御劍乘風(fēng)來,除魔天地間!===login
user.vue
御劍乘風(fēng)來,除魔天地間!===user 姓名：{{ userInfo.name }}
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) { // 在發(fā)送請求之前做些什么 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); });// 添加響應(yīng)攔截器instance.interceptors.response.use( function (response) { // 對響應(yīng)數(shù)據(jù)做點什么 return response.data; }, async function (error) { // console.log(error.response, 222); if (error.response.status === 401) { // console.log(error, 88); /* 解決token過期的問題 */ let tokenObj = JSON.parse(localStorage.getItem(“token”)); const res = await requestFreshToken({ method: “PUT”, url: “/authorizations”, headers: { Authorization: “Bearer ” + tokenObj.refresh_token, }, }); // 將使用刷新token獲取的新的token存儲起來 localStorage.setItem( “token”, JSON.stringify({ token: res.data.data.token, refresh_token: tokenObj.refresh_token, }) ); // console.log(res, 777); // 這里重新發(fā)送請求后 使用的是request 又會走上面的請求攔截 又會重新攜帶剛剛存的新的token return instance(error.response.config); } // 對響應(yīng)錯誤做點什么 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”, });};
