在main.js中进行全局注册:
import * as directives from '@/directives'
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach(key => {
// 注册自定义指令
Vue.directive(key, directives[key])
})
此导入语法可以获取文件中所有的指令对象:import * as 变量
得到的是一个对象{ 变量1:对象1,变量2: 对象2 ... }。
Object.keys()的用法:返回对象中每一项key的数组。
Token失效的主动介入、被动介入:
import axios from "axios";
import store from "@/store";
import router from "@/router";
import { Message } from "element-ui";
import { getTimeStamp } from "./auth";
const TimeOut = 3600; // 定义超时时间
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});
// request interceptor
service.interceptors.request.use(
(config) => {
// 在这个位置需要统一的去注入token
if (store.getters.token) {
// 如果token存在 注入token
if (IsCheckTimeOut()) {
// 如果它为true表示 过期了
// token没用了 因为超时了
store.dispatch("user/logout"); // 登出操作
// 跳转到登录页
router.push("/login");
return Promise.reject(new Error("token超时了"));
}
config.headers["Authorization"] = `Bearer ${store.getters.token}`;
}
return config; // 必须返回配置
},
(error) => {
return Promise.reject(error);
}
);
// response interceptor 响应拦截器
service.interceptors.response.use(
(response) => {
// axios默认加了一层data
const { success, message, data } = response.data;
// 要根据success的成功与否决定下面的操作
if (success) {
return data;
} else {
// 业务已经错误了应该进catch
Message.error(message); // 提示错误消息
return Promise.reject(new Error(message));
}
},
(error) => {
// error 信息 里面 response的对象
if (
error.response &&
error.response.data &&
error.response.data.code === 1000
) {
// 当等于1000的时候 表示 后端告诉我token超时了
store.dispatch("user/logout"); // 登出action 删除token
router.push("/login");
} else {
Message.error(error.message); // 提示错误信息
}
return Promise.reject(error);
}
);
// 是否超时
// 超时逻辑 (当前时间 - 缓存中的时间) 是否大于 时间差
function IsCheckTimeOut() {
const currentTime = Date.now(); // 当前时间戳
const timeStamp = getTimeStamp(); // 缓存时间戳
return (currentTime - timeStamp) / 1000 > TimeOut;
}
export default service;