hasCat

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
// 引入多个模块的规则
import approvalsRouter from "./modules/approvals";
import departmentsRouter from "./modules/departments";
import employeesRouter from "./modules/employees";
import permissionRouter from "./modules/permission";
import attendancesRouter from "./modules/attendances";
import salarysRouter from "./modules/salarys";
import settingRouter from "./modules/setting";
import socialRouter from "./modules/social";
import userRouter from "./modules/user";
/* Layout */
import Layout from "@/layout";
export const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/login/index"),
    hidden: true,
  },

  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },

  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        name: "dashboard",
        component: () => import("@/views/dashboard/index"),
        meta: { title: "首页", icon: "dashboard" },
      },
    ],
  },
  {
    path: "/import",
    component: Layout,
    hidden: true, // 该组件不在菜单中显示
    children: [
      {
        path: "",
        component: () => import("@/views/import"),
        meta: {
          title: "导入",
        },
      },
    ],
  },
  userRouter,
  // 404 page must be placed at the end !!!
  // { path: '*', redirect: '/404', hidden: true }
];
// 动态路由的变量
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter,
];
const createRouter = () =>
  new Router({
    mode: "history", // require service support
    base: "/hrsaas/",
    scrollBehavior: () => ({ y: 0 }),
    routes: [...constantRoutes],
  });

const router = createRouter();

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;

// vuex的权限模块
import { constantRoutes } from "@/router";
// vuex中的permission模块用来存放当前的 静态路由 + 当前用户的 权限路由
const state = {
  routes: constantRoutes, // 所有人默认拥有静态路由
};
const mutations = {
  // newRoutes可以认为是 用户登录 通过权限所得到的动态路由的部分
  setRoutes(state, newRoutes) {
    // 下面这么写不对 不是语法不对 是业务不对
    // state.routes = [...state.routes, ...newRoutes]
    // 有一种情况  张三 登录 获取了动态路由 追加到路由上  李四登录 4个动态路由
    // 应该是每次更新 都应该在静态路由的基础上进行追加
    state.routes = [...constantRoutes, ...newRoutes];
  },
};
const actions = {};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

import permission from "./modules/permission";

const store = new Vuex.Store({
  modules: {
    // 子模块   $store.state.app.
    // mapGetters([])
    app,
    settings,
    user,
    permission,
  },
  getters,
});

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);
// 引入多个模块的规则
import approvalsRouter from "./modules/approvals";
import departmentsRouter from "./modules/departments";
import employeesRouter from "./modules/employees";
import permissionRouter from "./modules/permission";
import attendancesRouter from "./modules/attendances";
import salarysRouter from "./modules/salarys";
import settingRouter from "./modules/setting";
import socialRouter from "./modules/social";
import userRouter from "./modules/user";
/* Layout */
import Layout from "@/layout";
export const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/login/index"),
    hidden: true,
  },

  {
    path: "/404",
    component: () => import("@/views/404"),
    hidden: true,
  },

  {
    path: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        name: "dashboard",
        component: () => import("@/views/dashboard/index"),
        meta: { title: "首页", icon: "dashboard" },
      },
    ],
  },
  {
    path: "/import",
    component: Layout,
    hidden: true, // 该组件不在菜单中显示
    children: [
      {
        path: "",
        component: () => import("@/views/import"),
        meta: {
          title: "导入",
        },
      },
    ],
  },
  userRouter,
];
// 动态路由的变量
export const asyncRoutes = [
  approvalsRouter,
  departmentsRouter,
  employeesRouter,
  permissionRouter,
  attendancesRouter,
  salarysRouter,
  settingRouter,
  socialRouter,
];
const createRouter = () =>
  new Router({
    mode: "history", // require service support
    base: "/hrsaas/",
    scrollBehavior: () => ({ y: 0 }),
    routes: [...constantRoutes], // 动态路由和静态路由的临时合并
  });

const router = createRouter();

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher; // reset router
}

export default router;

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
import app from "./modules/app";
import settings from "./modules/settings";
import user from "./modules/user";
import permission from "./modules/permission";
import tagsView from "./modules/tagsView";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView,
  },
  getters,
});

export default store;

const getters = {
  sidebar: (state) => state.app.sidebar,
  device: (state) => state.app.device,
  token: (state) => state.user.token, // 将user模块下的token作为快捷方式放出来
  name: (state) => state.user.userInfo.username, // 将子模块中的对象中的名称开放出来
  userId: (state) => state.user.userInfo.userId,
  staffPhoto: (state) => state.user.userInfo.staffPhoto, // 头像
  companyId: (state) => state.user.userInfo.companyId,
  routes: (state) => state.permission.routes,
};
export default getters;

import { getToken, setToken, removeToken, setTimeStamp } from "@/utils/auth";
import { login, getUserInfo, getUserDetailById } from "@/api/user";
import { resetRouter } from "@/router";
const state = {
  token: getToken(), // 设置token为共享
  userInfo: {}, // 这里为什么不写null ?
};
const mutations = {
  // 设置token的mutations
  setToken(state, token) {
    state.token = token; // 只是设置了vuex中的数据
    // 需要将vuex中的数据同步到缓存
    setToken(token);
  },
  removeToken(state) {
    state.token = null; // 设置vuex中的token为null
    removeToken(); // 同步删除缓存中的token
  },
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo;
    // state.userInfo = { ...userInfo } // 浅拷贝 如果要去改属性里面的某一个值 可以用浅拷贝的方式
  },
  removeUserInfo(state) {
    state.userInfo = {}; // 重置为空对象
  },
};
const actions = {
  // 封装一个登录的action
  // data认为是 { mobile,password }
  // 只要用async标记了函数 那么这个函数本身就是promise对象
  async login(context, data) {
    // 调用登录接口
    const result = await login(data);
    // result就是token
    context.commit("setToken", result);

    setTimeStamp(); // 设置时间戳
  },
  // 获取用户资料
  async getUserInfo(context) {
    const result = await getUserInfo();
    // 此时result里面已经有userId
    const baseInfo = await getUserDetailById(result.userId); // 用户的基本信息
    context.commit("setUserInfo", { ...result, ...baseInfo }); // 修改state中的用户资料
    return result;
  },
  // 登出action
  lgout({ commit }) {
    // 删除token
    commit("removeToken");
    // 删除用户资料
    commit("removeUserInfo");
    // 重置路由
    resetRouter();
    // 清空路由模块下的路由信息
    // Vuex子模块 调用子模块的mutation
    commit("permission/setRoutes", [], { root: true }); // commit默认是提交的当前子模块的mutations
    // 如果加上 root: true 就表示commit此时是根级的commit
    // this.$store.commit('permission/setRoutes')
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// 引入了静态路由
// 权限模块的目的 是提供当前用户所拥有的路由权限的数据  静态路由 + 当前用户的自身的动态路由
import { constantRoutes, asyncRoutes } from "@/router";
const state = {
  // routes表示当前人的路由权限
  routes: constantRoutes, // 当前所有人都默认拥有静态路由
};
const mutations = {
  // newRoutes认为是用户登录之后获取的新路由
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes]; // 静态路由  + 动态路由
    // 需要得到newRoutes 才能调用mutations
  },
};
const actions = {
  // 筛选路由模块 menus认为是当前用户资料的menus标识  代表用户所拥有的的权限
  filterRoutes(context, menus) {
    // menus  ['setting','approvals]
    // asyncRoutes  [{ name: ''  }]
    var routes = [];
    menus.forEach((item) => {
      // item是字符串 去asyncRoutes里面找有没有路由的name叫这个字符串
      routes.push(...asyncRoutes.filter((route) => route.name === item));
    });
    // routes就是当前用户的筛选之后的动态路由
    context.commit("setRoutes", routes);
    // 最后加一行代码
    return routes; // 这里返回是因为后面调用action的时候 要使用
  },
};
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

// 路由的拦截权限问题
import router from "@/router";
import store from "@/store";
import NProgress from "nprogress";
import "nprogress/nprogress.css"; // 引入进度条样式

// 前置守卫
const whileList = ["/login", "/404"];
router.beforeEach(async (to, from, next) => {
  NProgress.start(); // 开启进度条
  // next是一个必须执行的钩子 不执行就卡主了
  if (store.getters.token) {
    if (to.path === "/login") {
      // next() 放行
      // next(false) 终止
      // next(地址) 跳到某个 地址
      next("/"); // 跳到主页
    } else {
      // 要判断是不是已经获取过资料了
      if (!store.getters.userId) {
        // 如果id不存在 意味着当前没有用户资料 就要去获取用户资料
        // vuex的action是一个promise
        const { roles } = await store.dispatch("user/getUserInfo");
        // 此时已经获取完资料
        const routes = await store.dispatch(
          "permission/filterRoutes",
          roles.menus
        );
        // 此时得到的routes是当前用户的所拥有的的动态路由的权限
        router.addRoutes([
          ...routes,
          { path: "*", redirect: "/404", hidden: true },
        ]); // 将当前动态路由加到当前路由规则上
        // 加await的意思是 强制等待获取完用户资料之后 才去放行  就能保证 用户进到页面时候 有资料
        // 添加完路由之后 不能用next()  要用next(to.path) 否则地址不能生效 这算是一个已知 的小缺陷
        // 执行完addRoutes 必须执行next(to.path) 不能执行 next() 这是一个已知的问题缺陷
        next(to.path); // 解决直接执行next()时的异常
      } else {
        next(); // 放行
      }
    }
  } else {
    if (whileList.indexOf(to.path) > -1) {
      // 表示在白名单里面
      next();
    } else {
      next("/login");
    }
  }
  NProgress.done(); // 是为了解决手动输入地址时 进度条不关闭的问题
});

// 后置守卫
router.afterEach(() => {
  NProgress.done();
});

import axios from "axios";
import { Message } from "element-ui";
import { getTimeStamp } from "@/utils/auth";
import store from "@/store";
import router from "@/router";
const TimeOut = 5400; // 定义超时时间
const service = axios.create({
  //    设置基础地址
  // 环境变量 npm run dev  /api   /生产环境 npm run build  /prod-api
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000, // 认为只要超过5秒钟不响应 就超时
});
// 请求拦截器
service.interceptors.request.use(
  async (config) => {
    // 请求接口  config是请求配置
    // 取token
    if (store.getters.token) {
      // 只要有token 就要检查token时效性
      if (CheckIsTimeOut()) {
        //  继续？
        await store.dispatch("user/lgout");
        router.push("/login"); // 跳到登录
        return Promise.reject(new Error("您的token已经失效"));
      }
      // 如果存在token
      config.headers.Authorization = `Bearer ${store.getters.token}`;
      // return config
    }
    // 这里一定要注意
    // 一定要return config
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 成功执行
    // axios默认加了一层data的包裹
    const { success, message, data } = response.data;
    if (success) {
      // 此时认为业务执行成功了
      return data; // 返回用户所需要的数据
    } else {
      // 当业务失败的时候
      Message.error(message); // 提示消息
      return Promise.reject(new Error(message));
    }
  },
  async (error) => {
    // error 有response对象 config
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 10002
    ) {
      // 后端告诉前端token超时了
      await store.dispatch("user/lgout"); // 调用登出action
      router.push("/login"); // 跳到登录页
    }
    // 失败
    // Message等同于 this.$message
    Message.error(error.message); // 提示错误
    // reject
    return Promise.reject(error); // 传入一个错误的对象  就认为promise执行链 进入了catch
  }
);
// 检查token是否过期
function CheckIsTimeOut() {
  // 当前时间  - 存储的时间戳 > 时效性  false   tr
  return (Date.now() - getTimeStamp()) / 1000 > TimeOut;
}
export default service;

import DemoComponent from "@/components/Democomponent";
Vue.component("my-component-name", DemoComponent);

import DemoComponentA from "@/components/DemocomponentA";
import DemoComponentB from "@/components/DemocomponentB";
import DemoComponentC from "@/components/DemocomponentC";
import DemoComponentD from "@/components/DemocomponentD";
import DemoComponentE from "@/components/DemocomponentE";
Vue.component("my-component-nameA", DemoComponentA);
Vue.component("my-component-nameB", DemoComponentB);
Vue.component("my-component-nameC", DemoComponentC);
Vue.component("my-component-nameD", DemoComponentD);
Vue.component("my-component-nameE", DemoComponentE);

import PageTools from "./PageTools";
import UploadExcel from "./UploadExcel";
import ImageUpload from "./ImageUpload";
import ScreenFull from "./ScreenFull";
import ThemePicker from "./ThemePicker";
import Lang from "./Lang";
import TagsView from "./TagsView";

export default {
  install(Vue) {
    Vue.component("PageTools", PageTools);
    Vue.component("UploadExcel", UploadExcel);
    Vue.component("ImageUpload", ImageUpload);
    Vue.component("ScreenFull", ScreenFull);
    Vue.component("ThemePicker", ThemePicker);
    Vue.component("Lang", Lang);
    Vue.component("TagsView", TagsView);
  },
};

import Components from "@/components";
Vue.use(Components); // 注册自己的自定义组件

// 负责管理所有的自定义指令
// 只负责导出指令对象
// 变量名称就是指令名称
export const imageerror = {
  // 指令内容
  // 指令作用在 图片上的 dom是图片对象
  // inserted 在Vue3中也改名 => mounted
  inserted(dom, options) {
    // inserted执行的之后 此时 并没有对 src赋值
    // 图片有地址 但是地址加载图片失败的时候 会执行一个函数  onerror
    dom.src = dom.src || options.value;
    dom.onerror = function () {
      // 监听onerror事件
      // options.value就是指令传过来的值
      dom.src = options.value; // 当图片异常的时候 接收指令传过来的值 让这个值作为头像的备选
    };
    // 只有src有值 并且加载失败才会触发onerror
  },
  // 此钩子会在给image赋值之后执行
  // 这个钩子函数在Vue3中改名了 => updated
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value;
  },
};

import * as directives from "@/directives";
// directives是所有指令的一个集合
Object.keys(directives).forEach((key) => {
  // key就是指令名称
  Vue.directive(key, directives[key]);
});

Vue.filter("capitalize", function (value) {
  if (!value) return "";
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

function pluralize(time, label) {
  if (time === 1) {
    return time + label;
  }
  return time + label + "s";
}

export function timeAgo(time) {
  const between = Date.now() / 1000 - Number(time);
  if (between < 3600) {
    return pluralize(~~(between / 60), " minute");
  } else if (between < 86400) {
    return pluralize(~~(between / 3600), " hour");
  } else {
    return pluralize(~~(between / 86400), " day");
  }
}
export function numberFormatter(num, digits) {
  const si = [
    { value: 1e18, symbol: "E" },
    { value: 1e15, symbol: "P" },
    { value: 1e12, symbol: "T" },
    { value: 1e9, symbol: "G" },
    { value: 1e6, symbol: "M" },
    { value: 1e3, symbol: "k" },
  ];
  for (let i = 0; i < si.length; i++) {
    if (num >= si[i].value) {
      return (
        (num / si[i].value)
          .toFixed(digits)
          .replace(/\.0+$|(\.[0-9]*[1-9])0+$/, "$1") + si[i].symbol
      );
    }
  }
  return num.toString();
}

import * as filters from "@/filters";
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});