ops-fronted-java/src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "umy-ui/lib/theme-chalk/index.css"; // 引入样式
// import "element-ui/lib/theme-chalk/index.css";
import "../src/assets/css/theme/index.css"; //cac主题
import "./assets/fonts/iconfont.css"; //按钮
Vue.use(ElementUI, {
  size: "small",
});

//引入Echarts;
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

//字体自适应
import "./utils/rem";

//引入日期// 注册全局 moment
import moment from "moment";
Vue.prototype.$moment = moment;

//挂载弹出信息
import { message } from "@/utils/resetMessage";
Vue.prototype.$message = message;

Vue.config.productionTip = false;
//虚拟列表

import { UTable, UTableColumn } from "umy-ui";
Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
  document.title = `${to.meta.title} | 运维管理系统`;
  // 获取用户的角色和token
  const role = localStorage.getItem("role");
  const token = localStorage.getItem("token");

  // 如果没有token，并且不是登录页面，重定向到登录页面
  if (!token && to.path !== "/login") {
    return next({ path: "/login" });
  }
  // 如果用户是超级管理员（role == 0），则允许访问任何页面
  if (role === "0") {
    return next();
  }
  // 如果用户从登录页面跳转到其他页面，并且已经拥有token，则允许通过
  if (from.path === "/login" && token) {
    return next();
  }
  // 获取权限列表（这里假设permissions是从后端获取的权限数组）
  const permissions = JSON.parse(localStorage.getItem("menuPermission")) || [];

  // 检查用户是否有访问当前路由的权限
  const hasPermission = permissions.some(
    (permission) => permission.key === to.path
  );

  // 如果路由需要权限，但用户没有权限，则重定向到无权限页面
  if (to.meta.requiresAuth && !hasPermission) {
    return next({ path: "/permission" });
  }

  // 如果路由在免登录白名单中，则直接通过
  if (to.meta.noAuth) {
    return next();
  }
  // 如果以上条件都不满足，正常通过
  next();
});

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