el-element-admin实现双路由菜单

news2024/11/28 20:48:20

需求:
1、输入用户名登录企业级菜单
2、点击企业级菜单中的首页,右边显示项目列表,点击某一行跳转到项目级菜单

注意:
企业级菜单和项目级菜单,后端分别给接口

具体实施:
1、点击面包靴首页的时候设置标记为企业级 1
D:\workCode\workShop-web\src\components\Breadcrumb\index.vue

 watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
      // 如果默认是首页 标记设置为企业级 1
      if (route.path === '/dashboard') {
        localStorage.setItem('enterpriseProjectFlag', 1)
        location.reload()
      }
    }
  }

2、点击退出时 标记设置为企业级 1
D:\workCode\workShop-web\src\layout\components\Navbar.vue

logout() {
 this.$store.dispatch('LogOut').then(() => {
    // 退出时 标记设置为企业级 1
    localStorage.setItem('enterpriseProjectFlag', 1)
    location.reload()
    if (this.$desktop.win != null) {
    // 跳转到泛云注销页面
      if (this.$store.getters.pageParmas.fy_logout_url && this.$store.getters.pageParmas.fy_logout_url.value && this.user.site.fyIp) {
        this.fy_logout_url = this.$store.getters.pageParmas.fy_logout_url.value.replace('{IP}', this.user.site.fyIp)
        this.$desktop.win.location.href = this.fy_logout_url
      }
    }
  })
}

3、菜单组件新增 @select 方法
D:\workCode\workShop-web\src\layout\components\Sidebar\index.vue

 <el-menu
   :default-active="activeMenu"
   :collapse="isCollapse"
   :background-color="variables.menuBg"
   :text-color="variables.menuText"
   :unique-opened="$store.state.settings.uniqueOpened"
   :active-text-color="variables.menuActiveText"
   :collapse-transition="false"
   @select="menuClick"
   mode="vertical"
 >
   <sidebar-item
     v-for="(route, index) in sidebarRouters"
     :key="route.path + index"
     :item="route"
     :base-path="route.path"
   />
 </el-menu>

点击左侧菜单中首页 标记为企业级1

methods:{
    //菜单激活回调
    menuClick(index){
      // 如果默认是首页 标记设置为企业级 1
      if (index === '/dashboard') {
        localStorage.setItem('enterpriseProjectFlag', 1)
        location.reload()
      }
    }
  }

4、localStorage中存储了enterpriseProjectFlag属性 该属性为1时代表企业级菜单,反之为0则代表项目级菜单
D:\workCode\workShop-web\src\router\index.js
引用企业级、菜单级接口

import { buildMenus, buildProject } from '@/api/system/menu'

全文重点:当企业级的时候在router.js loadMenus方法里加载企业级菜单 相反则加载项目级菜单
有了这段逻辑 仅需在自己需要区分企业级项目级菜单的地方 localStorage.setItem(‘enterpriseProjectFlag’, 0) 或localStorage.setItem(‘enterpriseProjectFlag’, 1) 即可加载对应菜单

export const loadMenus = (next, to) => {
  // 项目级 0 企业级 1
  if (Number(localStorage.getItem('enterpriseProjectFlag')) == 0 && getToken()) {
    // 项目级
    const data = {
      appType: appTypeProject,
      projectId: JSON.parse(localStorage.getItem('projectObject')).projId
    }
    buildProject(data).then(res => {
      const sdata = JSON.parse(JSON.stringify(res))
      const rdata = JSON.parse(JSON.stringify(res))
      const sidebarRoutes = filterAsyncRouter(sdata)
      const rewriteRoutes = filterAsyncRouter(rdata, false, true)
      rewriteRoutes.push({ path: '*', redirect: '/dashboard', hidden: true })
      store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由
        router.addRoutes(rewriteRoutes) // 动态添加可访问路由表
        next({ ...to, replace: true })
      })
      store.dispatch('SetSidebarRouters', sidebarRoutes)
    })
  } else if(Number(localStorage.getItem('enterpriseProjectFlag')) == 1) {
    // 企业级
    const params = {
      appType: appType
    }
    buildMenus(params).then(res => {
      const sdata = JSON.parse(JSON.stringify(res))
      const rdata = JSON.parse(JSON.stringify(res))
      const sidebarRoutes = filterAsyncRouter(sdata)
      const rewriteRoutes = filterAsyncRouter(rdata, false, true)
      rewriteRoutes.push({ path: '*', redirect: '/dashboard', hidden: true })
      store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由
        router.addRoutes(rewriteRoutes) // 动态添加可访问路由表
        next({ ...to, replace: true })
      })
      store.dispatch('SetSidebarRouters', sidebarRoutes)
    })
  }
}

5、区分企业级项目级角色
D:\workCode\workShop-web\src\store\modules\user.js
登录时默认企业级角色

// 登录
Login({ commit }, userInfo) {
    const rememberMe = userInfo.rememberMe
    return new Promise((resolve, reject) => {
      login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => {
        setToken(res.token, rememberMe)
        commit('SET_TOKEN', res.token)
        setUserInfo(res.user, commit)
        localStorage.setItem('enterpriseProjectFlag', 1)
        // 第一次加载菜单时用到, 具体见 src 目录下的 permission.js
        commit('SET_LOAD_MENUS', true)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
 // 设置企业级角色
export const setUserInfo = (res, commit) => {
  // 如果没有任何权限,则赋予一个默认的权限,避免请求死循环
  if (res.roles.length === 0) {
    commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT'])
  } else {
    commit('SET_ROLES', res.roles)
  }
  commit('SET_USER', res.user)
}

设置项目级角色

// 获取具体项目信息
SetProject({ commit }, row) {
  return new Promise((resolve, reject) => {
    setProject(row.projId).then(res => {
      setProjectUserInfo(res, commit)
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })
},
export const setProjectUserInfo = (res, commit) => {
  // 如果没有任何权限,则赋予一个默认的权限,避免请求死循环
  if (res.length === 0) {
    commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT'])
  } else {
    commit('SET_ROLES', res)
  }
}

6、点击企业级首页右边显示的项目列表的某一行 跳转到项目级逻辑
D:\workCode\workShop-web\src\views\project\index.vue
重点: location.reload()

// 查看项目
viewProject(row) {
   localStorage.setItem('projectObject', JSON.stringify(row))
   // 企业级 1 项目级 0 ,触发项目级菜单接口
   localStorage.setItem('enterpriseProjectFlag', 0)
   location.reload()
 },
 // 刷新之后
 [CRUD.HOOK.afterRefresh]() {
   // 项目级 0 ,跳转到HUB协作
   if (Number(localStorage.getItem('enterpriseProjectFlag')) === 0) {
     // 获取具体项目信息
     this.$store.dispatch('SetProject', JSON.parse(localStorage.getItem('projectObject')))
     this.$router.push({
       path: '/project/projectInfo',
       query: {
         projId: JSON.parse(localStorage.getItem('projectObject')).projId
       }
     })
   }
 },

最终效果图
企业级
在这里插入图片描述
项目级
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/646512.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第14届蓝桥杯国赛真题剖析-2023年5月28日Scratch编程初中级组

[导读]&#xff1a;超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成&#xff0c;后续会不定期解读蓝桥杯真题&#xff0c;这是Scratch蓝桥杯真题解析第149讲。 第14届蓝桥杯Scratch国赛真题&#xff0c;这是2023年5月28日上午举办的全国总决赛&#xff0c;比赛仍然采取…

基于java springboot的图书管理系统设计和实现

基于java springboot的图书管理系统设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目录…

load_dataset加载huggingface数据集失败

1. 一般的加载方式 from datasets import load_dataset dataset_dict load_dataset(cmrc2018)这种加载方式可能会显示因为连接问题导致失败&#xff0c;此时可以在hugging face里面找到对应的页面下载下来 然后改一下代码&#xff1a; from datasets import load_dataset d…

关于TFTP传输协议

TFTP&#xff08;Trivial File Transfer Protocol,简单文件传输协议&#xff09;&#xff1a;实现客户端与服务器之间简单文件传输。小文件传输&#xff0c;端口&#xff1a;69。协议简单&#xff0c;易于实现。 缺点&#xff1a; 传输效率低对于超时机制没有明确说明每包长度…

华为OD机试真题B卷 JavaScript 实现【数组拼接】,附详细解题思路

一、题目描述 现在有多组整数数组&#xff0c;需要将它们合并成一个新的数组。 合并规则&#xff0c;从每个数组里按顺序取出固定长度的内容合并到新的数组中&#xff0c;取完的内容会删除掉&#xff0c;如果该行不足固定长度或者已经为空&#xff0c;则直接取出剩余部分的内…

第18章:逻辑架构

一、逻辑架构剖析 1.1服务器处理客户端请求 ①MySQL是典形的C/S架构&#xff0c;服务器端使用mysqld ②客户端进程向服务器进程发送SQL语句&#xff0c;服务器进程在向客户端进程发送处理结果。 查询请求演示图 查询请求详细图 1.2第1层&#xff1a;连接层 ①客户端访问My…

如何使用 NGINX Service Mesh 进行速率限制

原文作者&#xff1a;NGINX 原文链接&#xff1a;如何使用 NGINX Service Mesh 进行速率限制 转载来源&#xff1a;NGINX 官方网站 ​ NGINX 唯一中文官方社区 &#xff0c;尽在 nginx.org.cn 无论 HTTP 请求是恶意的&#xff08;暴力破解密码或 DDoS 攻击&#xff09;还是正常…

day07--java高级编程:JDK8的新特性,JDK9的新特性,JDK10的新特性,JDK11的新特性,JDK15的新特性

1 JDK8的其它新特性 说明&#xff1a;一些8中的新特性在&#xff0c;java高级部分学习的同时顺便讲过了。 1.1 JDK8新特性的总体结构 1.2 Java 8新特性简介 1.3 Lambda表达式 1.3.1 出现背景 1.3.2 Lambda表达式的使用举例 package com.atguigu.java1;import org.junit.Tes…

2023年软件测试简历没有邀约?为什么?8类细节通通告诉你(附赠高薪简历)

求职不顺&#xff0c;没有邀约&#xff0c;大概率是你的简历出现了问题。 本篇文章列出高薪简历应该注意的细节&#xff0c;合计36处&#xff0c;涉及简历的八大组成部分。 现在就讲&#xff1a; 一、简历样式要求&#xff08;3点要求&#xff09; 1、简历格式&#xff0c;…

某游戏登录密码加密,webpack

注意&#xff1a;文章内容仅用于学习和技术交流&#xff0c;切勿做出违法的事情&#xff0c;如有侵权请联系我删除。 网址&#xff08;今天的大冤种&#xff09;&#xff1a;aHR0cHM6Ly93d3cuZ205OS5jb20v 一&#xff0c;分析 从上面图片可以看到&#xff0c;他的密码是加密了…

FinGPT:以数据为中心的方法革新开源金融

FinGPT 由 AI4Finance Foundation 开发&#xff0c;是一种以数据为中心的工具&#xff0c;可使大型语言模型 (LLM) 的金融数据民主化。它旨在成为开放式金融的开源解决方案&#xff0c;旨在彻底改变金融业。本文将深入探讨 FinGPT 的复杂性、它的好处&#xff0c;以及它如何成为…

vscode使用latex环境无法编译,是否与anaconda环境冲突

Vscode使用latex环境无法编译&#xff0c;是否与anaconda环境冲突 在 VSCode 中使用 LaTeX 环境无法编译&#xff0c;可能与 Anaconda 环境冲突。这是因为 Anaconda 默认会将环境变量PATH 设置为 Anaconda 所在的路径&#xff0c;如果你使用的是 Anaconda 内置的 Python环境&am…

如何三分钟快速制作自定义ppt

目录 利用ChatGPTMindShow三分钟生成PPT 机器人 道合顺 莓用ai 百晓生 aichat 结合提词器以达到更好地提问效果&#xff1a; 更好地提问ChatGPT_常用prompt表_小黄同学LL的博客-CSDN博客 举个栗子&#xff1a; 利用ChatGPTMindShow三分钟生成PPT 提词&#xff1a;…

LeCun世界模型出场!Meta震撼发布首个「类人」模型,理解世界后补全半张图,自监督学习众望所归

LeCun世界模型出场&#xff01;Meta震撼发布首个「类人」模型&#xff0c;理解世界后补全半张图&#xff0c;自监督学习众望所归 原创 新智元 新智元 2023-06-14 12:19 发表于北京 【新智元导读】LeCun的世界模型终于来了&#xff0c;可谓是众望所归。既然大模型已经学会了理解…

Unity入门6——光源组件

一、参数面板 二、参数介绍 Type&#xff1a;光源类型 Spot&#xff1a;聚光灯 Range&#xff1a;发光距离Spot Angle&#xff1a;光锥角度Directional&#xff1a;方向光Point&#xff1a;点光源Area&#xff08;Baked Only&#xff09;&#xff1a;面光源 仅烘焙。预先算好&…

如何选择好用的效果图渲染平台

在现代的建筑设计、室内设计、电影动画等行业中&#xff0c;效果图已经成为了一个重要的工具&#xff0c;能够帮助设计师和制作人员更好地呈现他们的想法和概念。而要制作出高质量的效果图&#xff0c;一个好用的效果图渲染平台是非常必要的。 如何选择好用的效果图渲染平台呢…

【Flutter】Flutter 如何获取安装来源信息

文章目录 一、 前言二、 安装来源信息的基本概念1. 什么是安装来源信息2. 为什么我们需要获取安装来源信息 三、 如何在 Flutter 中获取安装来源信息1. 准备工作2. 安装必要的依赖库3. 编写代码获取安装来源信息 四、 完整示例代码五、总结 一、 前言 在这篇文章中&#xff0c…

图像处理实战01-OpenCV 入门指南

Python OpenCV 入门指南 OpenCV是一个强大的计算机视觉库&#xff0c;它可以用于处理图像和视频数据&#xff0c;以及进行目标检测和跟踪等任务。&#xff0c;将学会如何使用Python编写OpenCV代码来进行基础和进阶的图像处理和分析。 学习OpenCV可以帮助你掌握基本的图像处理…

(哈希表) 1002. 查找共用字符 ——【Leetcode每日一题】

❓1002. 查找共用字符 难度&#xff1a;简单 给你一个字符串数组 words &#xff0c;请你找出所有在 words 的每个字符串中都出现的共用字符&#xff08; 包括重复字符&#xff09;&#xff0c;并以数组形式返回。你可以按 任意顺序 返回答案。 示例 1&#xff1a; 输入&…

Apache Hive安装部署

Apache Hive安装部署 &#x1f683;Hive元数据 描述数据的数据&#xff0c;主要描述数据属性信息&#xff0c;用来支持如指示存储位置&#xff0c;历史数据&#xff0c;资源查找&#xff0c;文件记录等功能。存储在关系型数据库中。如hive内置Derby&#xff0c;或第三方MySql…