账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    帮忙解读一个开源 vue3后台项目源码的一个功能点
    60
    0
    概述在 github 上找到个开源项目 cool-admin-vue,仓库地址是:https://github.com/cool-team-...。自己读源码时有个地方不知如何实现的,希望能帮忙解读问题登录页面 src\cool\modules\base\pages\login\index.vue 的 108 行是登录成功后获取菜单数据,代码如下const [first] = await store.dispatch("permMenu");然后我找到了对应的模块的 vuex 文件的项目路径是:src\cool\modules\base\store\menu.ts 它的的完整代码如下:import { ElMessage } from "element-plus";import storage from "store";import store from "@/store";import router from "@/router";import { deepTree, revDeepTree, isArray, isEmpty } from "@/core/utils";import { menuList } from "@/config/env";import { revisePath } from "../utils";import { MenuItem } from "../types";const state = { // 视图路由,type=1 routes: storage.get("viewRoutes") || [], // 树形菜单 group: storage.get("menuGroup") || [], // showAMenu 模式下,顶级菜单的序号 index: 0, // 左侧菜单 menu: [], // 权限列表 permission: storage.get("permission") || []};const getters = { // 树形菜单列表 menuGroup: (state: any) => state.group, // 左侧菜单 menuList: (state: any) => state.menu, // 视图路由 routes: (state: any) => state.routes, // 权限列表 permission: (state: any) => state.permission};const actions = { // 设置菜单、权限 permMenu({ commit, state, getters }: any) { return new Promise((resolve, reject) => { const next = (res: any) => { if (!isArray(res.menus)) { res.menus = []; } if (!isArray(res.perms)) { res.perms = []; } const routes = res.menus .filter((e: MenuItem) => e.type != 2) .map((e: MenuItem) => { return { id: e.id, parentId: e.parentId, path: revisePath(e.router || String(e.id)), viewPath: e.viewPath, type: e.type, name: e.name, icon: e.icon, orderNum: e.orderNum, isShow: isEmpty(e.isShow) ? true : e.isShow, meta: { label: e.name, keepAlive: e.keepAlive }, children: [] }; }); // 转成树形菜单 const menuGroup = deepTree(routes); // 设置权限 commit("SET_PERMIESSION", res.perms); // 设置菜单组 commit("SET_MENU_GROUP", menuGroup); // 设置视图路由 commit( "SET_VIEW_ROUTES", routes.filter((e: MenuItem) => e.type == 1) ); // 设置菜单 commit("SET_MENU_LIST", state.index); resolve(menuGroup); }; // 监测自定义菜单 if (!getters.app.conf.customMenu) { store.$service.common .permMenu() .then((res: any) => { next(res); }) .catch((err: string) => { ElMessage.error("菜单加载异常"); console.error(err); reject(err); }); } else { next({ menus: revDeepTree(menuList) }); } }); }};const mutations = { // 设置树形菜单列表 SET_MENU_GROUP(state: any, list: MenuItem[]) { state.group = list; storage.set("menuGroup", list); }, // 设置视图路由 SET_VIEW_ROUTES(state: any, list: MenuItem[]) { router.$plugin.addViews(list); state.routes = list; storage.set("viewRoutes", list); }, // 设置左侧菜单 SET_MENU_LIST(state: any, index: number) { const { showAMenu } = store.getters.app.conf; if (isEmpty(index)) { index = state.index; } if (showAMenu) { const { children = [] } = state.group[index] || {}; state.index = index; state.menu = children; } else { state.menu = state.group; } }, // 设置权限 SET_PERMIESSION(state: any, list: Array<any>) { state.permission = list; storage.set("permission", list); }};export default { state, getters, actions, mutations};其中方法 permMenu 是如何请求后端数据的?我没找到请求的 url ,这个菜单数据从哪里来的
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 黛烟微醉不负泪 普通会员 1楼

      当然可以,但首先需要你提供具体的功能点以及项目开源的源码,这样我才能更准确地为你解析和解读。如果你能提供这些信息,我会很乐意帮助你。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部