vue2 动态路由添加失败

Question

vuerouter@3.6.0 版本 addroute之后 打印getRoutes显示已经添加成功 但是访问添加后的路由报 Error in beforeCreate hook: "TypeError: Cannot read properties of null (reading 'call')" 和nnot read properties of null (reading 'call')
错误 我这个是node+mysql 登录成功后后端返回路由权限表 与本地声明的动态路由做name的判断 我登录成功后的数据都存在sessionStorage
采用递归进行返回name和路由name进行判断 相等返回

需要进行判断的路由

数据存储

addroute后进行打印的router.getRoutes

访问动态添加的路由后报的错误

登录按钮

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  回答:

  这个错误表明在beforeCreate钩子函数中，有一个null对象需要被调用，但不可行。此错误通常与Vue组件有关，可能是组件还未被正确的设定，或者是一个值缺失或没有赋值。

  针对这个问题，我会考虑以下步骤来排除故障:

  1.确认路由添加后的格式正确。可以使用console.log方法输出getRoutes信息，并观察动态路由的信息是否正确。

  console.log(this.$router.options.routes);
  

  2.检查路由组件是否已经正确声明。Vue路由系统要求所有组件都必须显式声明，否则可能会导致该组件无法加载。建议检查所有路由组件，确保它们都有在Vue上进行声明。

  3.如果在动态添加路由后依旧存在问题，可以考虑检查beforeCreate钩子函数及相关文件。在该钩子函数中，可能会存在指向null的调用，导致路由无法正确加载。

  以下是我写的一个基本的路由动态添加示例：

  /**
   * 递归获取权限路由表的相关name属性。
   */
  function filterAsyncMenus(routes, authMenus, level) {
    var res = [];
    routes.forEach((route) => {
        var tmp = { ...route };
        authMenus.forEach((menu) => {
            if (menu.name === tmp.name) {
                tmp.meta = menu.meta;
                if (menu.children && menu.children.length > 0) {
                  tmp.children = filterAsyncMenus(
                    tmp.children,
                    menu.children,
                    level
                  );
                }
                res.push(tmp);
            }
        });
    });
    return res;
  }
  
  /**
   * 添加动态路由
   */
  function addAsyncRoutes() {
    var authMenus = JSON.parse(sessionStorage.getItem("authMenus"));
    var roleRoutes = JSON.parse(sessionStorage.getItem("roleRoutes"));
    var finalRoutes = filterAsyncMenus(roleRoutes, authMenus, 0);
    router.addRoutes(finalRoutes);
  }
  

  关于加密token常见问题的回答：

  在某些情况下，您可能会遇到以下问题，例如身份验证令牌到达并且您需要进行解密操作，但是解密过程失败了。此时，您可以考虑以下措施：

  1.检查令牌加密和解密方法是否正确。合理的加密方法应该具有良好的安全性且应避免加密算法溢出。同样，解密方法也需要正确处理访问令牌，并成功撤销它的授权。

  2.检查您的后端系统是否正确保存和请求令牌。如果令牌内容遭到篡改或令牌已过期，则可能会导致解密操作失败。这些问题可以通过检查令牌过期日期和重写令牌存储方法来避免。

  3.确认您的前端系统是否都已修复。例如，您的前端阅读令牌时遗漏了某些标记，可能会导致解密操作失败。

  4.检查是否有其他操作或事件与解密操作冲突，导致无法正确执行解密。在这种情况下，检查相关事件和操作并将其隔离来进行排除。

  总体来说，处理令牌解密问题需要高度的警惕性。无论在哪个环节出问题，都可能导致安全性和数据完整性问题。因此，我们建议使用合适的算法和工具，并确保代码规范和安全意识来确保令牌得以正确解密。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^