vue2 动态路由添加失败

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

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

登录按钮

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

以下回答来自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.检查是否有其他操作或事件与解密操作冲突，导致无法正确执行解密。在这种情况下，检查相关事件和操作并将其隔离来进行排除。
总体来说，处理令牌解密问题需要高度的警惕性。无论在哪个环节出问题，都可能导致安全性和数据完整性问题。因此，我们建议使用合适的算法和工具，并确保代码规范和安全意识来确保令牌得以正确解密。

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