全局路由守卫和局部路由守卫

最新推荐文章于 2024-02-02 16:44:03 发布

周亚鑫

最新推荐文章于 2024-02-02 16:44:03 发布

阅读量1.1k

点赞数 3

分类专栏： vue 文章标签：全局路由守卫和局部路由守卫 vue

本文链接：https://blog.csdn.net/q4717529/article/details/118423809

版权

vue 专栏收录该内容

121 篇文章 15 订阅

订阅专栏

本文详细介绍了Vue应用中如何实现全局和单个路由守卫，包括如何在`router/index.js`设置全局守卫验证登录状态，以及如何在组件内部实现针对特定页面的守护。通过Vuex存储状态，确保安全的权限控制。

摘要由CSDN通过智能技术生成

全局路由守卫和局部路由守卫

今日有童鞋问我全局的路由守卫怎默写我直接细心地教了教他，现在我更新一下博客里面的全局路由守卫和单个的路由守卫希望对你们有所帮助！注（我的数据是保存到vuex里面的）

此处是全局的路由守卫需要写到router文件夹下面的index.js里面

// router.beforeEach((to, from, next) => {
//     if (store.state.token) {
//         next();
//     } else {
//         if (to.path == "/login") {
//             next();
//         } else {
//             next("/login");
//         }
//     }
// });

此处是单个的路由守卫哪个页面需要守卫就写到哪一个页面跟data是同级的童鞋们不要写错了

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$store.state.user) {
        next();
      } else {
        vm.$router.push("/login");
      }
    });
  },