vue2后台管理系统通用模板

依赖包： 

 路由

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