若依框架登录后跳转其他页面获取不同的菜单登录进入后跳转至动态路由的第一个路由

news2025/7/17 10:02:07

最近碰到的需求是登录进入后,先跳转至一个自己定义的页面,在这个页面选择一个系统后,进入若依的系统,根据选择的系统获取相应的菜单,进入页面后默认跳转至后端返回的动态路由的第一个路由

1.首先在登录页面login.vue做如下改动

写成你要跳转过去的页面:(这个路由如果是自己定义的,要记得在router文件夹下声明一下路由)


在你自定义的页面内,把原本写在登录页面跳转的路由,写到你在自定义页面要跳转的地方,这个地方我没有写原本的redirect,不知道有没有影响.

这样在你登录后,页面就不会按照之前默认的跳到系统首页了,而是会跳转至你定义的路由;

 2.找到src目录下permission.js文件,作如下改动:

这里主要设置的就是跳转至自定义页面,设置跳转的默认首页.

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
  // 意思是如果你已经登录了,而且现在还可以获取到token即登录没有过期,你要去登录页的话是去不了的, 
   // 但是去其他页面是放行的,去其他页面就会走下面的else。
      // 登录后不可再返回至登录页,此处next不放行
      next({ path: '/' })
      NProgress.done()
    } else {
      if (from.path === '/login') {
        // 如果是从登录页过来,就直接放行到要去的路由,什么都不做
        // 在这里只有一种可能性,就是从/login来,去/channel路由,即跳转至自定义页面,在这里因为什
        //么都没做,所以目前为止,还没有获取到系统的菜单
        next();
        return;
      }
      // 我看了下这里只有登录后跳转的时候以及刷新系统页面的时候会进来,
      // 在我们跳转自定义页面的时候并不会进来,走的是上面的if,
      // 只有从自定义页面往其他页面跳转的时候才会走这里
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
         // 确认当前已经登录了,能获取到登录的用户信息
         // 进入到这里的时候,我已经选择了自己接下来要进入的系统,要把系统的
         // 标志id先存起来,然后获取菜单的时候传过去
          let systemId=sessionStorage.getItem("systemId");
          store.dispatch('GenerateRoutes',{systemId}).then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            // 接下来是设置默认跳转的页面
            let path="";
            // 设置动态路由的第一个路由为跳转的默认页面
            path=accessRoutes[0].path+"/"+accessRoutes[0].children[0].path;
            if(from.path=="/channel"){
              // 如果是从自定义页面跳转过去,就跳转至动态路由的第一个路由
              next({path,replace:true})
            }else{
      // 如果是点击了一个菜单,然后刷新的页面,就保持在当前的页面,防止刷新后跳转到了自己定义的页面
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
            }
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单,直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

3.在store文件夹下找到permission.js文件,作如下变动:

这里主要设置的就是获取路由的时候根据传递的参数获取相应的路由菜单,以及默认首页的设置.


  state: {
    routes: [],
    addRoutes: [],
    defaultRoutes: [],
    topbarRouters: [],
    sidebarRouters: [],
    indexPage:"",// 修改跳转首页
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_DEFAULT_ROUTES: (state, routes) => {
      state.defaultRoutes = constantRoutes.concat(routes)
    },
    SET_TOPBAR_ROUTES: (state, routes) => {
      state.topbarRouters = routes
    },
    SET_SIDEBAR_ROUTERS: (state, routes) => {
      state.sidebarRouters = routes
    },
    SET_INDEX_PAGE:(state,routes)=>{
      state.indexPage=routes
    }
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit }, param) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters({ menuFlag: param.systemId }).then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const firstPage=res.data[0].path+"/"+res.data[0].children[0].path;
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(asyncRoutes);
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          commit('SET_INDEX_PAGE',firstPage)
          resolve(rewriteRoutes)
        })
      })
    }
  }

4.找到src/layout/components/Sidebar/logo.vue文件,作如下改动:

这里主要设置的就是进入系统后点击若依的logo跳转的页面,改成我们设置的默认首页. 

 5.找到src/layout/components/TagsView/index.vue,作如下改动:
这里主要设置的是关闭所有tagview后,会展示默认页面,防止关闭所有的tagview后页面空掉,不然太不美观.

 这里设置的是当展示的是默认页面时,tagview是不允许关闭的,即下面的效果:

这里设置的是所有能被关闭的tagview被关闭后,会跳转至默认页面.

 6.找到src/plugns/tab.js,作如下改动:

这里设置的是编辑完个人中心后点击关闭后跳转的页面,防止点击关闭后页面空掉.

 7.找到src/components/BredCrumb/.index.vue,作如下变动:

这里设置的是隐藏掉若依原本面包屑导航中的首页

 8.找到src/views/error/401.vue和404.vue,作如下改动:

这里设置的是从401和404页面返回首页,返回至默认首页;

 大概就是以上步骤,有遗漏的再补充,因为本人没有完全理解吃透若依的框架,而且有些地方是借鉴的别的大佬的,所以有那些说的不清楚的地方,还请见谅.

 

 

 

 

 

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

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

相关文章

蓝桥杯冲击-02约数篇(必考)

文章目录 前言 一、约数是什么 二、三大模板 1、试除法求约数个数 2、求约数个数 3、求约数之和 三、真题演练 前言 约数和质数一样在蓝桥杯考试中是在数论中考察频率较高的一种,在省赛考察的时候往往就是模板题,难度大一点会结合其他知识点考察&#x…

安装element ui

安装element ui记录 步骤 1.先在dev控制台输入npm i element-ui --save 2.出现警告 F:\vue_test\src> npm i element-ui --save npm WARN deprecated core-js2.6.12: core-js<3.23.3 is no longer maintained and not recommended for usage due to the number of is…

Vue项目实战——实现一个任务清单(学以致用,两小时带你巩固和强化Vue知识点)

Vue2.x 项目实战&#xff08;一&#xff09; 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目&#xff08;一&#xff09;Vue2.x 实现一个任务清单Vue2.x项目&#xff08;二&#xff09;Vue2.x 实现GitHub搜索案例Vue3.x项目&#xff08;三&#xff09;Vue3.x 实现一…

Vue 高德地图(@amap/amap-jsapi-loader)的基本使用:添加标记、POI关键字搜索、路线规划...(方法一)

高德地图的基本事件与使用前言&#xff1a; 引入并初始化渲染地图1、初始化地图2、地图鼠标点击事件3、添加标记、 移除标记点4、搜索服务——POI关键字搜索 [AMap.PlaceSearch]5、驾车路线规划服务5.1 可拖拽驾车路线规划 [AMap.DragRoute]5.2 途经点 &#xff08;起点 终点 途…

在vue3+ts项目里使用query和params传参

一 query 传参 &#xff08;类似get请求&#xff09; query 传参方式① 传递方组件 home.vue <template><div classc><p>query传参</p><el-button type"success" click"toList"> to list</el-button> </div>…

LayUI框架的使用步骤实现登录页面

目录 一、LayUI的简介 二、下载安装 三、引入并且测试 四、自定义模块 四、利用LayUI实现一个登录页面 一、LayUI的简介 1.1 什么是LayUI&#xff1f; Layui&#xff08;谐音&#xff1a;类 UI) 是一套开源的 Web UI 解决方案&#xff1b; 由国人开发&#xff08;作者贤心…

Python人脸识别

#头文件&#xff1a;import cv2 as cvimport numpy as npimport osfrom PIL import Imageimport xlsxwriterimport psutilimport time#人脸录入def get_image_name(name):name_map {f.split(.)[1]:int(f.split(.)[0]) for f in os.listdir("./picture")}if not name…

宇宙最强-GPT-4 横空出世:最先进、更安全、更有用

文章目录前言一、准确性提升1.创造力2.视觉输入3.更长的上下文二、相比于ChatGPT有哪些提升1.GPT-4 的高级推理能力超越了 ChatGPT2.GPT-4 在多种测试考试中均优于 ChatGPT。三、研究团队在GPT-4模型都做了哪些改善1.遵循 GPT、GPT-2 和 GPT-3 的研究路径2.我们花了 6 个月的时…

2022年Web前端开发流程和学习路线(详尽版)

前言 前端侧重于人机交互和用户体验&#xff0c;后端侧重于业务逻辑和大规模数据处理。理论上&#xff0c;面向用户的产品里&#xff0c;所有问题&#xff08;包括产品、设计、后端、甚至看不见的问题&#xff09;的表现形式&#xff0c;都会暴露在前端&#xff0c;而只有部分…

JS防抖和节流

前言 在进行窗口的操作或者输入框操作时&#xff0c;如果事件处理函数用的频率无限制&#xff0c;会加重浏览器和服务器的负担&#xff0c;此时我们就可以用防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;的方式来减少调用频率&#xff0c;同时…

简析强制缓存和协商缓存

零、目录 背景介绍 http 缓存机制 使用小结 一、 背景介绍 浏览器和服务器进行交互的过程&#xff0c; 时间开销的瓶颈往往出现在数据的传输的过程之中。 这个场景类似介于 A城 到 B城 之间只有一座 “通道” &#xff0c; 每次想从A城 到 B城 &#xff0c;必须按照人数交付高…

Maven使用教程(IDEA版)

目录 一、Maven简介 1.1 在项目中如何导入jar包&#xff1f; 1.2 传统导入jar包的方式存在什么问题&#xff1f; 1.3 项目生命周期 1.4 Maven简介 二、Maven安装及配置 2.1 Maven下载 2.2 Maven安装 2.3 配置环境变量 三、Maven的项目结构 3.1 Maven的项目结构 3.2…

【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

文章目录一、CSS 优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div…

VueX使用

vuex基本概念 vuex官方文档 vuex是vue的状态管理工具&#xff0c;状态即数据。 状态管理就是集中管理vue中 通用的 一些数据 注意&#xff08;官方原文&#xff09;&#xff1a; 不是所有的场景都适用于vuex&#xff0c;只有在必要的时候才使用vuex 使用了vuex之后&#xf…

手机解锁方法:8个顶级的 Android 手机解锁软件

一般来说&#xff0c;太简单的密码是不安全的&#xff0c;所以我们设置一个安全的密码&#xff0c;可能会稍微复杂一点。然而&#xff0c;我们可能经常会忘记复杂的密码并锁定我们的 Android 智能手机。 8个顶级的 Android 手机解锁软件 如果您遇到过这种情况并且正在寻找一种…

【vue2】vue全家桶介绍,学习vue必备

​ &#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue全家桶介绍&#xff0c;学习vue必备&#xff01;&#xff01;&#xff01; 【前言…

Vue开发实例(11)之el-menu实现左侧菜单导航

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…

【Vue从入门到进阶】Node.js安装与配置

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端&#xff0c;欢迎大家一起来交流学习&#x1f3c6; &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f525;系列专栏&#xff1a;Vue从入门到进阶 &#x1f4ac;个人格言&#xff1a;但行好事&…

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般&#xff0c;上周才刚刚推出GPT-3.5-Turbo API&#xff0c;今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比&#xff0c;GPT-4最大的飞跃是增加了识图能力&#xff0c;并且回答准确性也得到显著提高。…

使用SpringBoot一小时快速搭建一个简单后台管理(后端篇)

不好意思让大家久等啦&#xff0c;最近也是因为学期末了&#xff0c;事情多了一点&#xff0c;所以更新的比较慢&#xff0c;请大家谅解下~ 好了话不多说&#xff0c;进入今天的教程环节 本次案例一共两篇文章教学&#xff1a; &#xff08;第一篇&#xff09;&#xff1a;数据…