/* * 项目启动入口方法 * * @Author: DCCloud * @Date: 2022-09-06 20:59:23 */ import '/@/assets/styles/tailwindcss.css' import { createApp } from 'vue'; import VantUi from 'vant' import "vant/lib/index.css"; import Antd, { message } from 'ant-design-vue'; import * as antIcons from '@ant-design/icons-vue'; import lodash from 'lodash'; import JsonViewer from 'vue3-json-viewer'; import 'vue3-json-viewer/dist/index.css'; import App from './App.vue'; import { smartSentry } from '/@/lib/smart-sentry'; import { loginApi } from '/src/api/system/login-api'; import constantsInfo from '/@/constants/index'; import { privilegeDirective, loadingDirective } from '/@/directives/privilege'; import i18n from '/@/i18n/index'; import privilegePlugin from '/@/plugins/privilege-plugin'; import smartEnumPlugin from '/@/plugins/smart-enums-plugin'; import { buildRoutes, router } from '/@/router'; import { store } from '/@/store'; import { useUserStore } from '/@/store/modules/system/user'; import 'ant-design-vue/dist/reset.css'; import 'vue3-tabs-chrome/dist/vue3-tabs-chrome.css'; import '/@/theme/index.less'; import { localRead } from '/@/utils/local-util.js'; import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js'; import '/@/assets/iconfont/iconfont.js'; // 导入样式 import "/@/views/flow/stFormDesign/styles/form-design.less"; // 导出本地iconfont import "/@/views/flow/stFormDesign/static/icons/iconfont"; // 引入表单设计器 import { StFormDesign, StFormMobileDesign } from "/@/views/flow/stFormDesign/packages/index.js"; import StFormBuild from "/@/views/flow/stFormDesign/packages/StFormBuild/index.js"; // 引入vxe-table import VxeUI from 'vxe-pc-ui' import 'vxe-pc-ui/lib/style.css' import VxeUITable from 'vxe-table' import 'vxe-table/lib/style.css' import '/@/components/BsUi/Render/index.js' import BsUi from "/@/components/BsUi" import "/@/components/BsUi/styles/index.less" // 引入common-table import CommonTable from './components/common/common-table/index.vue'; // 引入common-drawer import CommonDrawer from './components/common/common-drawer/index.vue'; // 引入common-card import CommonCard from './components/common/common-card/index.vue'; // 引入无分页common-table import CommonNoPageTable from './components/common/common-table-no-page/index.vue'; /* * -------------------- ※ 着重 解释说明下main.js的初始化逻辑 begin ※ -------------------- * * 1、在main.js里很多框架都是 直接调用初始化的vue方法,创建vue实例,然后挂载路由router、状态管理store等等,但是关于router这块是有问题的; * 2、因为现在大部分路由都是从后端接口返回的,如若直接初始化挂载路由,这时前端还没有从后端请求路由的数据,所以只能写到路由拦截器里,这样很绕很不清晰; * 正确的做法流程应该是: * 2.1)如果存在登录信息,则先ajax请求用户的所有路由,然后加载,再去创建vue实例和挂载路由 * 2.2)如果不存在路由信息,则创建vue实例和挂载路由(此时的路由应该只有login页面,因为用户拥有哪些路由是登录之后才知道的) * 3、以上,在main.js里两个方法,一个是 获取登录信息getLoginInfo,另一个初始化vue: initVue,在最下的if操作里 * * -------------------- ※ 着重 解释说明下main.js的初始化逻辑 end ※ -------------------- */ /** * 获取用户信息和用户权限对应的路由,构建动态路由 */ async function getLoginInfo() { try { let res = {} const url = window.location.href const key = "_loginKey_" const loginInfoRes = localStorage.getItem(key) if (url.indexOf("formWork") > 0 && loginInfoRes && loginInfoRes.length > 20) { res = JSON.parse(loginInfoRes) } else { res = await loginApi.getLoginInfo(); localStorage.setItem(key, JSON.stringify(res)) } //构建系统的路由 let menuRouterList = res.data.menuList.filter((e) => e.path || e.frameUrl); buildRoutes(menuRouterList); initVue(); //更新用户信息到pinia useUserStore().setUserLoginInfo(res.data); } catch (e) { message.error(e.data ? e.data.msg : e.message); smartSentry.captureError(e); initVue(); } } function initVue() { let vueApp = createApp(App); let app = vueApp.use(router).use(store).use(i18n).use(Antd).use(smartEnumPlugin, constantsInfo).use(privilegePlugin).use(JsonViewer); app.use(VxeUI).use(VxeUITable); app.use(StFormDesign); app.use(StFormMobileDesign); app.use(StFormBuild); app.component('CommonTable', CommonTable); app.component('CommonDrawer', CommonDrawer); app.component('CommonCard', CommonCard); app.component('CommonNoPageTable', CommonNoPageTable); app.use(VantUi); //注入权限 app.directive('privilege', { mounted(el, binding) { privilegeDirective(el, binding); }, }); //注入loading app.directive('loading', { updated(el, binding) { loadingDirective(el, binding); } }); // 注册图标组件 Object.keys(antIcons).forEach((key) => { app.component(key, antIcons[key]); }); // 注册BsUi组件 app.use(BsUi); //全局 app.config.globalProperties.$antIcons = antIcons; app.config.globalProperties.$lodash = lodash; //挂载 app.mount('#app'); } //不需要获取用户信息、用户菜单、用户菜单动态路由,直接初始化vue即可 let token = localRead(LocalStorageKeyConst.USER_TOKEN); if (!token) { initVue(); } else { getLoginInfo(); }