优化Vue路由守卫以解决访问根路由问题
在之前的版本中,也就是上一篇博客中:
利用Vue路由守卫实现权限控制,实现域名游客登录和对于用户权限的控制
我遇到了一个问题,特别是在访问根路由时。为了解决这个问题,我对路由守卫的代码进行了更新,去除了根路径的重定向。
{
path: '/',
name: 'Root'
// redirect: '/front/home' // 取消重定向,因为有些情况不尽人意
},
{ path: '/login', name: 'Login', meta: { name: '登录' }, component: () => import('../views/Login.vue') },
{ path: '/register', name: 'Register', meta: { name: '注册' }, component: () => import('../views/Register.vue') },
{ path: '/403', name: 'NotAuth', meta: { name: '无权限访问' }, component: () => import('../views/403.vue') },
{ path: '*', redirect: '/404' }, // 将所有未匹配的路由重定向到404页面
{ path: '/404', name: 'NotFound', meta: { name: '无法访问' }, component: () => import('../views/404.vue') },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 注:不需要前台的项目,可以注释掉该路由守卫
// 路由守卫
router.beforeEach((to, from, next) => {
const user = JSON.parse(localStorage.getItem('xm-user') || '{}');
if (!user.token) {//如果用户未登录(游客访问)
if (to.path === ('/')){
// 访问的是根路径,则重定向到前台首页
next('/front/home')
}else if (to.path.startsWith('/manager')) {
// 访问的是后台管理路由,则重定向到登录页面
next('/login');
}else {// 访问的不是后台管理路由且不是根路径,则认为是游客,可以放行访问公共页面
next();
}
}
else if (user.token){//如果用户已登录(用户访问)
if (to.path === ('/')){// 访问的是根路径
if ( user.role === 'ADMIN' || user.role === 'HOMESTAY' ){
// 如果用户角色是管理员或民宿,则重定向到后台首页
next('/manager/home');
} else if (user.role === 'USER'){
// 如果用户角色是用户,则重定向到前台首页
next('/front/home')
}
}else if (to.path.startsWith('/manager') && user.role !== 'ADMIN' && user.role !== 'HOMESTAY' ){
// 如果用户未登录且访问的是前台路由,且角色不是管理员和民宿
next('/403');
} else if (to.path === '/manager/homestayPerson' && user.role === 'HOMESTAY') {
// 如果用户是民宿,但想要访问 '/manager/homestay',放行
next();
} else if ((to.path.startsWith('/manager/notice')
|| to.path.startsWith('/manager/admin')
|| to.path.startsWith('/manager/homestay')
|| to.path.startsWith('/manager/user'))
&& user.role === 'HOMESTAY'){
// 如果用户是民宿,拦截这些页面
next('/403');
}else if (to.path.startsWith('/front') && user.role !== 'USER'){
// 如果用户未登录且访问的是前台路由,且角色不是用户
next('/403');
}else {
next(); // 角色对应,且不是访问根目录,则继续正常跳转
}
}
else {
next(); // 其他情况,则继续正常跳转
}
});
export default router
通过取消根路径的重定向,我们可以确保用户在访问根路径时,不会被意外重定向到其他页面。这样,用户就可以直接访问根路径,而不会遇到不必要的重定向。同时,这也有助于提高用户体验,使访问流程更加直观和顺畅。