frontend/src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

//引入element-ui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI, {
  size: "small",
});
//  引入Echarts
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

// 引入 vue-awesome-swiper
import VueAwesomeSwiper from "vue-awesome-swiper";
//引入 vue-awesome-swiper 样式
import "swiper/dist/css/swiper.css";
Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);

import "./assets/css/reset.css"; //默认样式
import "./assets/css/theme.less"; //修改主题颜色
import "./assets/css/global.less";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title} | 可视化智能管控系统`;
  const role = localStorage.getItem("ms_username");
  if (!role && to.path !== "/login") {
    next("/login");
  } else if (to.meta.permission) {
    console.log(to.meta.permission);
    console.log(role);
    // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
    role === "admin" ? next() : next("/403");
  } else {
    next();
    // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
    // if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
    //     Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
    //         confirmButtonText: '确定'
    //     });
    // } else {
    //     next();
    // }
  }
});