优化Vue路由守卫的用户访问

优化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

通过取消根路径的重定向，我们可以确保用户在访问根路径时，不会被意外重定向到其他页面。这样，用户就可以直接访问根路径，而不会遇到不必要的重定向。同时，这也有助于提高用户体验，使访问流程更加直观和顺畅。