Vue.js Vue路由器身份验证保护url额外字符

Vue.js Vue路由器身份验证保护url额外字符,vue.js,Vue.js,我在每个函数之前使用Vue route Auth Guard。如果用户未登录,则无法访问仪表板和配置文件页面。它工作得很好,但当我尝试强制路由时,它会阻止我,但也会在url中添加一些额外的字符。我能把它们取下来吗 url- 当用户未登录时,路由器防护将重定向到路径:'/',查询:{redirect:to.fullPath}。此时指向.fullPath==/dashboard 正斜杠“/”字符不是有效的查询字符,因此vue路由器使用encodeURIComponent/dashboard将其转换为

我在每个函数之前使用Vue route Auth Guard。如果用户未登录,则无法访问仪表板和配置文件页面。它工作得很好,但当我尝试强制路由时,它会阻止我,但也会在url中添加一些额外的字符。我能把它们取下来吗

url-


当用户未登录时,路由器防护将重定向到路径:'/',查询:{redirect:to.fullPath}。此时指向.fullPath==/dashboard

正斜杠“/”字符不是有效的查询字符,因此vue路由器使用encodeURIComponent/dashboard将其转换为编码版本%2F

当用户登录时,您可以从$route.query.redirect获取重定向参数,它将自动解码回/dashboard


或者,由于您的所有路由都有名称,您可以使用将重定向参数设置为to.fullPath,而不是将其设置为to.name,然后当用户登录时,您可以按名称重定向到路由。

因此我将执行此操作------查询:{redirect:to.name}是的,请尝试。但是请记住,如果使用路由的名称,则必须确保将来的所有路由都有一个名称。
import Vue from 'vue'
import Router from 'vue-router'
import * as firebase from "firebase";

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes : [
    {
      path: '/',
      name: 'home',
      component: () => import('../components/home')
    },
    {
      path: '/login',
      name: 'signin',
      component: () => import('../components/user/signIn')
    },
    {
      path: '/register',
      name: 'signup',
      component: () => import('../components/user/signUp')
    },
    {
      path: '/forgot-password',
      name: 'forgotPassword',
      component: () => import('../components/user/forgotPassword')
    },
    {
      path: '/profile',
      name: 'profile',
      component: () => import('../components/user/profile'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: () => import('../components/dashboard'),
      meta: {
        requiresAuth: true
      }
    },

  ]
})

//Router Guard
router.beforeEach((to, from, next) => {
  // Check fore required auth guard
  if(to.matched.some(record => record.meta.requiresAuth)){
    // check if not logged in
    if(!firebase.auth().currentUser){
      // go to login
      next({
        path: '/',
        query: {
          redirect: to.fullPath
        }
      });
    }else{
      // proceed to route
      next();
    }
  }else{
    next();
  }
})

export default router