Question

我有一条路线。如果用户未登录，则将其重定向到登录页面。我正在尝试抓住用户来自的路由，以便在他们登录后将他们重定向回去。

这是我的路线：

{
  path: '/builder/:pin?',
  name: 'Builder',
  component: Builder,
  props: true,
  meta: {
    requiresAuth: true, roles: ['XXXX', 'XXXX', 'XXXX']
  }
}

router.beforeEach((to, from, next) => {
  // check to see if router requires auth
  if (to.meta.requiresAuth) {
    let user = store.getters.getUser
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        if(!user.emailVerified) {
          next({ name: 'Login' })
          store.dispatch('setLoginFeedback', {code: 'resubmit-verification', message: 'Your email is not verified'})
          return
        }
        // get current user
        let ref = db.collection('users').where('email', '==', user.email)
        ref.get().then(snapshot => {
          if (!snapshot.empty) {
            snapshot.forEach(doc => {
              this.user = doc.data()
              // if no roles are set
              if(!to.meta.roles) {
                next()
              } else if(to.meta.roles) {
                const hasRole = this.user.roles.find(val => to.meta.roles.includes(val))
                if (hasRole) {
                  next()
                } else {
                  alert('you do not have permission to enter')
                }
              } else {
                // next({ name: 'Dashboard' })
              }

            })
          } else {
            // no user
            // if (!this.user) {
              next({ name: 'Login' })
            // }
          }
        })
      } else {
        next({ name: 'Login' })
      }
    })
  } else {
    // console.log('does not require auth')
    next()
  }


})

在我的登录组件中，我有以下代码：

beforeRouteEnter(to, from, next) {
    next((vm) => {
        vm.prevRoute = from;
    });
    console.log(to, from, next)
},

我当前在本地服务器上。当我转到localhost:8080/builder时，它将正确重定向到登录名，但在控制台中。我是从

获得的

{name: null, meta: {}, path: "/", hash: "", query: {}, …}

为什么我在路径中没有得到/builder？

Answer 1

您可以这样做。.

this.$router.back();

这将带您返回上一条路线

程序导航| Vue路由器https://router.vuejs.org/guide/essentials/navigation.html

Answer 2

您用来重定向到登录页面的next({ name: 'Login' })调用似乎并没有修改from属性。那是因为您是“内部”路由，所以与进行router.push调用不同。

执行这种重定向的最简单方法可能是使用查询参数：

next({
  name: "bar",
  query: { redirect: to.fullPath }
});

然后在组件$route.query.redirect或路由器导航保护from.query.redirect中访问它。

Answer 3

要返回上一条路线，可以使用

this.$router.go(-1)

vue保留以前访问过的路线的历史记录。

-1表示返回一项记录。

请参阅https://router.vuejs.org/guide/essentials/navigation.html#router-go-n

从Vue.js中的Route获取以前的URL

3 个答案: