vue中跳转路由前判断用户是否有该路由的权限

吃西瓜不吐籽_

已于 2023-06-13 10:52:06 修改

阅读量459

点赞数 1

文章标签： vue.js javascript 前端

于 2023-06-13 10:48:12 首次发布

本文链接：https://blog.csdn.net/weixin_57933935/article/details/131183605

版权

文章描述了一个在前端应用中遍历树形结构数据的异步函数，用于检查用户权限并决定是否执行路由跳转。当用户点击事件触发时，首先获取当前路由信息，然后遍历用户权限路由表，寻找具有特定名称且未隐藏的路由。如果找到，就直接跳转到相应路径；否则，提示用户无权限访问。

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

首先路由结构是树形结构数据，所以我们先写个遍历树形结构函数

 // 循环树形结构数据函数
    async treeIterator(tree, func) {
      await Promise.all(
        tree.map(async (node) => {
          func(node);
          node.children && (await this.treeIterator(node.children, func));
        })
      );
    },

在快捷跳转点击事件中写

 async funcToNewDetail() {
      let activeIndex = this.$refs.carousel.activeIndex; //业务逻辑（无关）
      let id = this.sxoaList[activeIndex].id; //业务逻辑（无关）
      
      let isFound = false; // 定义一个变量记录是否找到指定节点
      //先判断用户是否有该路由权限 
      //this.$store.getters.permission_routes 该用户路由表
      await this.treeIterator(this.$store.getters.permission_routes, (node) => {
        if (node.name === "Prolist" && node.hidden === false) { //是否有路由name为想要判断的路由，以及路由是否开启状态
          this.$router.push({ //有该路由则直接跳转过去
            path: "/informationCenter/projectDynamics/listDetail",
            query: {
              id: id,
              type: "news",
            },
          });
          isFound = true; // 找到了对应路由，将变量设置为 true
        }
      });
      // 在遍历结束后检查是否找到了指定对应路由，如果没有则弹出提示
      if (!isFound) {
        this.$message({
          message: "您没有查看新闻信息详情页面权限！",
          type: "warning",
        });
      }
    },