在登录页实现跳转到上一次浏览的页面

chelly_z

已于 2022-05-18 14:36:59 修改

阅读量274

点赞数

文章标签： javascript 前端

于 2022-05-18 14:30:39 首次发布

本文链接：https://blog.csdn.net/chelly_z/article/details/124841632

版权

这篇博客主要介绍了在前端项目中如何处理登录重定向和路由守卫的实现。通过监听$route变化，获取查询参数并进行重定向。同时在表单提交成功后，利用延迟跳转确保用户体验。此外，还详细阐述了路由前置守卫中的逻辑，包括对用户权限的检查，以及在有token和无token情况下的不同处理策略。

摘要由CSDN通过智能技术生成

//先在本页面存入重定向的url

data() {

return {

  redirect: undefined,

}

}

//然后在watch监听属性中监听$route的变化

watch: {

$route: {

handler: function(route) {

const query = route.query

if (query) {

this.redirect = query.redirect

this.otherQuery = this.getOtherQuery(query)

}

},

immediate: true

}

},

//触发表单提交

if (valid) {

          this.loading = true

          Promise.all([ this.$store.dispatch('user/login', this.form)]).then(() => {

              this.$message.success('登录成功！欢迎你')

              setTimeout(async () => {
//跳转重定向

                this.$router.push({ path: this.redirect || '/' })

                this.loading = false

              }, 1 * 1000)

            })

            .catch(() => {

              this.loading = false

            })

//在路由前置守卫中也要进行监控
 const hasToken = getToken()
//已登录有token的情况
  if (hasToken) {
    const nowRouter = getNowRouter()
    if (to.path === '/') {
      if (nowRouter) {
        next(nowRouter)
      } else {
        next('/problems/issue_tracking')
      }
    }
    if (to.path !== '/') {
      setNowRouter(to.fullPath)
    }
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/problems/issue_tracking' })
      NProgress.done()
    } 
} else {
    //没有token
    //判断是否是去login页面
    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.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }