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