登录后带参数自动跳转到url所指向的页面

由于使用的是vue-element-template框架，想要实现我在地址栏访问页面b，此时未登录，然后它自动跳转到登录页面，点击登录，登录成功之后自动跳转到b页面并且带着原有的参数。

第一步修改src/permission.js，在该文件的最后有以下代码

 } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }

如未登录系统我直接访问
http://127.0.0.1:8090/index#/onlineCheckEdit?id=29
可以看到原先的代码为它，就是未登录的时候的所有链接都会走到这个非白名单的else逻辑里，然后跳转到登录页面

next(`/login?redirect=${to.path}`)

上面的代码最后的路径为

/login?redirect=onlineCheckEdit

我们可以看到它拼接的地址只有路由而没有参数，我们辛辛苦苦接受的参数gg了，然后它跳转到其他页面也只是带了这个链接，并没有参数，所以在登录页面的watch函数的$route里面也是拿不到参数的。所以我们要修改这行代码，在上面的代码里to.path是关键，我们打印一下这to里到底有啥子参数，如下图

ok我们这里发现它原来是带参数的，在它的query里，然后我们把参数取出来手动的拼接进去就可以啦，因为它是一个对象，我就把对象里的所有参数全部取出并拼接

改完之后：

 } else {
    /* has no token*/
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      var params = "?";
      // es6特性，判断一个对象是否为空
      if (Object.keys(to.query).length == 0) {
        params = ""
      } else {
        for (const key in to.query) {
          params += key + "=" + to.query[key] + "&"
        }
      }
       //next(`/login?redirect=${to.path}`) // 否则全部重定向到index，然后其对应的路由就是登录页面
      next(`/login?redirect=${to.path}`+params)
      NProgress.done()
    }
  }
})

这里修改完了，我们的需求是未登录系统然后在地址栏输入http://127.0.0.1:8090/index#/onlineCheckEdit?id=29，之后自动跳转到登录页面，点击登录成功后，自动跳转到该onlineCheckEdit?id=29路由所对应的页面。

所以下面来收拾登录页在src/views/login/index.vue，找到handleLogin函数，看代码中的注释部分

 handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('user/login', this.loginForm).then(() => {             
			  // 这里的this.redirect就是我们上面拼接好的带参数的路径
			  // onlineCheckEdit?id=29
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
              return
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

登录成功之后就跳转到onlineCheckEdit所对应的页面了，我们在该页面的created里的created函数里直接获取参数即可

created() {
            var id = this.$route.query.id;
            }

我这样是没问题的，如果获取不到是上面login里登录的代码里把参数解析this.redirect解析出this.redirect里面的参数，然后这样写

this.$router.push({ path: this.redirect, query: { key: value } })

这样在其他页面就可以直接通过路由去获取参数了

var id = this.$route.query.id;

如果嫌弃路由麻烦，前端一切皆js，可以简单暴力的在页面的create函数里，直接获取浏览器地址栏获取参数，然后解析url里的参数就可以了

created() {
           var url = window.location.href;
            }

好了完美解决问题

第一步的基础上，自动登录，并且退出登录之后再次点击登录跳转到上次退出的页面

我们还想再完美一点，浏览器输入地址http://127.0.0.1:8090/index#/onlineCheckEdit?id=29，回车跳到登录页面，然后自动登录，再跳转到http://127.0.0.1:8090/index#/onlineCheckEdit?id=29页面。
首先我们的修改登录代码，当登录页面加载完毕，就让它自动登录，在src/views/login/index.vue的js的export default 里添加以下代码

mounted () {
        this.handleLogin();
    }

问题是解决了，但是我们发现，我们的系统不能退出了，点击右上方的退出按钮，一退出就又返回到当前页面了。于是我们在退出的方法里添加一个参数isLogout=isLogout，然后在登录页面判断如果url里有该参数，那么久不自动登录，让用户点击按钮才登录，否则就自动登录。

退出登录的代码在src/layout/components/Navbar.vue的最底部函数logout里添加参数

async logout() {
              await this.$store.dispatch('user/logout')
              // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
              // 退出过滤，如果是手动点击退出，链接上添加isLogout，
              // 然后在登录页面判断如果有status=logout则不自动登录，否则打开任意页面,只要触发登录就默认自动登录
              this.$router.push(`/login?redirect=${this.$route.fullPath}` +"&isLogout=isLogout")
            }

然后在登录页面的mounted函数里修改成以下代码

mounted () {
      if (window.location.href.indexOf("isLogout") == -1) {
        // 非手动退出到登录页面，系统默认自动登录
        this.handleLogin();
      } else {
        this.$router.push({ path: this.redirect || '/' })
      }
    }

然后我们再在登录方法里登录成功之后去掉该参数，否则该参数该一直存在了，而且跳转读取参数的时候也会有问题，我们这里处理一下，将该参数isLogout去掉。
在src/views/login/index.vue里的handleLogin方法里

handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('user/login', this.loginForm).then(() => {             
			  // 这里的this.redirect就是我们上面拼接好的带参数的路径
			  // onlineCheckEdit?id=29
              this.$router.push({ path: this.redirect.replace("?isLogout=isLogout", "") || '/' })
              this.loading = false
              return
            }).catch(() => {
              this.loading = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

好了，浏览器输入http://127.0.0.1:8090/index#/onlineCheckEdit?id=29

回车自动登录，并且按照url里的参数查询出了数据

点击右上角退出

返回到登录页面，此时不会自动登录

再次点击登录返回到点击退出按钮之前的页面

完美解决问题。