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

问题描述:

首先我这个后管项目是若依权限管理系统,路由实现都是动态加载的。现在有一个需求,后端会邮件发送系统中的链接,这个链接是携带参数(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()
  }

})

  • 21
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr_LiuP

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值