依赖包:
路由
router/index.js:
import Vue from "vue";
import VueRouter from "vue-router";
import { Message } from "element-ui";
import jwt_decode from "jwt-decode";
Vue.use(VueRouter);
const WHITE_LIST = ["/login"];
const routes = [
{
path: "/",
name: "home",
component: () => import("@/views/home.vue"),
redirect: "/userStatistics",
children: [
{
path: "/official_website_userlist",
name: "official_website_userlist",
component: () => import("@/views/official_website_userlist"),
},
{
path: "/userStatistics",
name: "userStatistics",
component: () => import("@/views/userStatistics"),
},
{
path: "/orderStatistics",
name: "orderStatistics",
component: () => import("@/views/orderStatistics"),
},
],
},
{
path: "/login",
name: "login",
component: () => import("@/views/login"),
},
{
path: "*",
component: () => import("@/views/exception/NotFound"),
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
// 路由守卫
router.beforeEach((to, from, next) => {
let token = localStorage.getItem("token");
if (WHITE_LIST.includes(to.path)) {
next();
} else if (token) {
if (jwt_decode(token).exp < parseInt(new Date().getTime() / 1000)) {
// 已过期
Message.warning("登录状态已过期, 请重新登录");
localStorage.clear();
next({
path: "/login",
query: to.path === "/" ? {} : { from: to.path },
});
} else {
next();
}
} else {
next({
path: "/login",
query: to.path === "/" ? {} : { from: to.path },
});
}
});
export default router;
vuex
store/index.js:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 当前登录用户信息
user_info: {
username: "",
},
},
mutations: {
// 设置登录用户的信息
setUserInfo(state, user_info) {
state.user_info = {
username: user_info.username,
};
},
},
actions: {},
modules: {},
});
axios
api/axios.js:
/**
* axios实例
*/
import axios from "axios";
import { Message } from "element-ui";
import router from "@/router";
const service = axios.create({
baseURL: `${config_settings.address_node}`,
});
service.defaults.timeout = 1000 * 60;
service.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded;charset=utf-8";
/* 添加请求拦截器 */
service.interceptors.request.use(
(config) => {
// 添加token到header
const token = localStorage.getItem("token");
if (token && config.headers) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
/* 添加响应拦截器 */
service.interceptors.response.use(
(res) => {
/**
* 以下几种情况都会报401:
* 1:无token
* 2:token被篡改
* 3:token过期
*/
if (res.data.code === 401) {
Message.warning("身份验证过期, 请重新登录");
router.push({
path: "/login",
query: { from: window.location.pathname },
});
localStorage.clear();
}
return res;
},
(error) => {
return Promise.resolve(error);
}
);
export default service;
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
//全局注册axios
import http from "@/api/axios.js";
Vue.prototype.$axios = http;
import dayjs from "dayjs";
Vue.prototype.$dayjs = dayjs;
import Cookies from "js-cookie";
Vue.prototyp