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

问题描述：

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

????????}

})