vue 前置路由守卫

在Vue中，我们可以使用前置路由守卫来在切换到某个路由组件之前执行一些操作。在main.js入口文件中，我们可以添加以下代码来设置前置路由守卫：

router.beforeEach((to, from, next) => {
  // to 目标路由
  // from 来源
  // next 放行
  // 如果需要验证，首页守卫
  if (to.meta.requireAuth) {
    // vuex仓库中的信息是否存在
    if (store.getters.user.userName) {
      next();
    } else {
      // 拦截路由
      next('./login');
    }
  } else {
    // 不需要验证，直接放行
    next();
  }
  // 登陆、注册守卫
  if (to.meta.cheakIsLogin) {
    if (store.getters.user.userName) {
      // next('/');
      // 路由让其返回至原来的地址
      router.back();
    } else {
      next();
    }
  } else {
    next();
  }
});

这段代码中，我们使用`beforeEach`方法来定义前置路由守卫。在该方法中，我们可以根据需要对目标路由进行验证，判断是否需要进行权限验证或者是否需要检查用户是否已登录。根据验证结果，我们可以选择放行或者拦截路由。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue——前置路由守卫](https://blog.csdn.net/YUHUI01/article/details/84201043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue中的路由守卫](https://blog.csdn.net/weixin_47075145/article/details/127336962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]