(前端)后管系统登录后隐藏url上信息同时获取url上携带参数~开发需求(bug)总结7

news/2024/7/10 0:07:32 标签: bug, vue, vue.js, 前端

问题描述:

首先我这个后管项目是若依权限管理系统,路由实现都是动态加载的。现在有一个需求,后端会邮件发送系统中的链接,这个链接是携带参数(id、用户的加密信息),比如:https://47.23.12.1/task/list?id=xxx&authInfo=xxx

用户通过这个链接点击进来,登录后可以直接跳转到这个任务列表,同时完成查询该条数据进行展示。

但此时我遇到一个问题,每次通过此链接进来后,问号后面的参数就自动没了,这让我很费解,后来看了代码发现在守卫里有这行代码:next({path: to.path, replace: true})  这行代码的意思就是 确保addRoutes已完成。 

根因找到了,因为这行代码,导致链接上不管拼接啥,进来后参数都没有了。 

解决办法:

由于是动态路由加载,所以需要等第一次访问的路由加载完成后,才能放行。下面直接看代码:

permission.js 文件

router.beforeEach((to, from, next) => {

        // 此处在URL上获取到id,然后先存到本地

        if (to.query.id) {

                localStorage.setItem('id', to.query.id)

        }

        NProgress.start()

        // 此处是处理URL上的authInfo信息

        if (to.fullPath.indexOf('authInfo') !== -1) {

                let fullPathObj = getQuery(to.fullPath)

                 // 解码 这个方法貌似不推荐了 可以使用 decodeURI 或 decodeURIComponent 代替。

                let escapeAuthInfo = unescape(fullPathObj.authInfo)

                // atob() 方法用于解码使用 base-64 编码的字符串。

                let authInfo = fullPathobj.authInfo ? (JSON.parse(window.atob))

                // 用户信息存储到cookie中

                setToken(authInfo.access_token)

        }

        if (getToken()) {

                if (to.path === '/login') {

                        next({path: '/'})

                        NProgress.done()

                } else if(to.name === 'loginAdmin') {

                        next() //此处loginAdmin是做了绕过aam的登录,本地登录后直接放行,方便测试

                } else {

                        if (store.getters.roles.length === 0) {

                                isRelogin.show = true

                                // 判断当前用户是否已经拉去完user_info信息

                                store.dispatch('GetInfo').then(() => {

                                        isRelogin.show = false

                                        store.dispatch('GenerateRoutes').then(accessRoutes => {

                                                // 根据roles权限生成可访问的路由表

                                                router.addRoutes(accessRoutes)

                                                if (!from.name) {

                                                        next({path:to.path, replace:true})

                                                } else {

                                                        // 在addRoutes后第一次访问被添加路由会白屏,原因是刚addRoutes就立刻访问被添加的路由,此时还没有执行结束

                                                        // 解决办法 采用下面方式,确保addRoutes动态添加的路由已经完全加载上去,确保addRoutes已完成。replace:true 告知本次操作,不能通过浏览器的后退按钮返回前一个路由

                                                        next({...to, replace:true})

                                                }

                                        })

                                }).catch(err => {

                                        window.location = process.env.VUE_APP_BASE_API + `/auth/aam/api/loginAam/1?path=${to.fullPath}`

                                })

                        } else {

                                next()

                        }

                }

        } else {

                // 没有token

                if (to.name == 'loginAdmin') {

                        next()

                } else {

                        if (to.name == 'login') {

                                next()

                        } else {

                                window.location = process.env.VUE_APP_BASE_API + `/auth/aam/api/loginAam/1?path=${to.fullPath}`

                        }

                }

                NProgress.done()

        }

})


http://www.niftyadmin.cn/n/5279514.html

相关文章

博格华纳电驱技术简析

面向电气化趋势,较早进入电气化领域的国际汽车零部件巨头,博格华纳提出“蓄势前行”战略,即“2025年电动车业务占比超过25%,到2030年45%”的转型目标。其中2025年,电动化产品销售额达25亿美元,其策略是收购…

NLP论文阅读记录 - | 使用GPT对大型文档集合进行抽象总结

文章目录 前言0、论文摘要一、Introduction二.相关工作2.1Summarization2.2 神经网络抽象概括2.2.1训练和测试数据集。2.2.2 评估。 2.3 最先进的抽象摘要器 三.本文方法3.1 查询支持3.2 文档聚类3.3主题句提取3.4 语义分块3.5 GPT 零样本总结 四 实验效果4.1数据集4.2 对比模型…

【Docker】基于华为 openEuler 应用 Docker 镜像体积压缩

书接 openEuler 系列文章(可以翻看测试系列),本次跟大家说说如何将 Java 包轻量化地构建到 openEuler 镜像中且保持镜像内操作系统是全补丁状态。 之前我们都是使用现成的 jdk 镜像进行构建的,如下图: FROM ibm-seme…

SQL---数据抽样

内容导航 类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统…

简单了解一下当前火热的大数据 -- Kylin

神兽麒麟 一、Apache Kylin 是什么?二、Kylin架构结语 一、Apache Kylin 是什么? 由eBay公司中国团队研发,是一个免费开源的OLAP多维数据分析引擎优点 超快的响应速度,亚秒级支持超大数据集(PB以上,千亿记…

Kafka 如何保证高可用?

Kafka 的基本架构组成是:由多个 broker 组成一个集群,每个 broker 是一个节点;当创建一个 topic 时,这个 topic 会被划分为多个 partition,每个 partition 可以存在于不同的 broker 上,每个 partition 只存…

Android13 Wifi启动流程分析

Android13 Wifi启动流程分析 文章目录 Android13 Wifi启动流程分析一、正常开关wifi 启动流程1、WifiManager2、WifiServiceImpl3、ActiveModeWarden4、ConcreteClientModeManager5、WifiNative6、WifiVendorHal7、HalDeviceManager8、wifi.cpp 二、重启设备时自动开启wifi流程…

GBASE南大通用ADO.NET 结构

GBASE南大通用ADO.NET(全称是 .NET Framework Data Provider For GBase)提 供给.NET 应用程序访问 GBase 数据库、获取数据、管理数据的一套完整的解决 方案。 GBASE南大通用 ADO.NET 的四个核心类及若干功能类具有以下功能:  建立和管…