Maximum call stack size exceeded vue 2

huangapple
go评论98阅读模式
英文:

Maximum call stack size exceeded vue 2

问题

我在尝试根据用户的roles_id值将用户重定向到其路径时遇到了这个问题

  1. const getUserRole = (to, from, next) => {
  2.   const currentUser = JSON.parse(localStorage.getItem("userData"));
  3.   if (currentUser) {
  4.     if (currentUser.roles_id === 1 && to.name === "user-dashboard") {
  5.       next({
  6.         name: "dashboard-new"
  7.       });
  8.     } else if (currentUser.roles_id === 2 && to.name === "dashboard-new") {
  9.       next({
  10.         name: "user-dashboard"
  11.       });
  12.     } else if (currentUser.roles_id === 3 && to.name === "mails-track") {
  13.       next({
  14.         name: "dispatch-dashboard"
  15.       });
  16.     } else if (to.name === "dashboard-new" && currentUser.roles_id === 1) {
  17.       next();
  18.     } else if (to.name === "user-dashboard" && currentUser.roles_id === 2) {
  19.       next();
  20.     } else if (to.name === "dispatch-dashboard" && currentUser.roles_id === 3) {
  21.       next();
  22.     } else {
  23.       next("/");
  24.     }
  25.   } else {
  26.     next("/");
  27.   }
  28. };
  30. export default [
  31.   {
  32.     path: "/dashboard",
  33.     name: "dashboard-new",
  34.     component: () =>
  35.       import("@/views/dashboard/new/DashboardNew.vue"),
  36.     meta: {
  37.       requiresAuth: true
  38.     },
  39.     beforeEnter: (to, from, next) => {
  40.       const currentUser = JSON.parse(localStorage.getItem("userData"));
  41.       if (currentUser && currentUser.roles_id === 1) {
  42.         getUserRole(to, from, next);
  43.       } else {
  44.         next("/");
  45.       }
  46.     }
  47.   },
  48.   {
  49.     path: "/user-dashboard",
  50.     name: "user-dashboard",
  51.     component: () =>
  52.       import("@/views/dashboard/new/user/UserDashboard.vue"),
  53.     meta: {
  54.       requiresAuth: true
  55.     },
  56.     beforeEnter: (to, from, next) => {
  57.       const currentUser = JSON.parse(localStorage.getItem("userData"));
  58.       if (currentUser && currentUser.roles_id === 2) {
  59.         getUserRole(to, from, next);
  60.       } else {
  61.         next("/");
  62.       }
  63.     }
  64.   }
  65. ];

但是我得到了"Maximum call stack size exceeded"的错误，我尝试使用switch条件也不起作用。

在本地环境上运行正常，但一旦上传到主机上就出现了这个问题。

我的代码有什么问题吗？

英文:

I am facing this problem when i try to redirect the user to their path depends on their roles_id value

<!-- language: lang-js -->

  1. const getUserRole = (to, from, next) =&gt; {
  2. const currentUser = JSON.parse(localStorage.getItem(&quot;userData&quot;));
  3. if (currentUser) {
  4. if (currentUser.roles_id === 1 &amp;&amp; to.name === &quot;user-dashboard&quot;) {
  5. next({
  6. name: &quot;dashboard-new&quot;
  7. });
  8. } else if (currentUser.roles_id === 2 &amp;&amp; to.name === &quot;dashboard-new&quot;) {
  9. next({
  10. name: &quot;user-dashboard&quot;
  11. });
  12. } else if (currentUser.roles_id === 3 &amp;&amp; to.name === &quot;mails-track&quot;) {
  13. next({
  14. name: &quot;dispatch-dashboard&quot;
  15. });
  16. } else if (to.name === &quot;dashboard-new&quot; &amp;&amp; currentUser.roles_id === 1) {
  17. next();
  18. } else if (to.name === &quot;user-dashboard&quot; &amp;&amp; currentUser.roles_id === 2) {
  19. next();
  20. } else if (to.name === &quot;dispatch-dashboard&quot; &amp;&amp; currentUser.roles_id === 3) {
  21. next();
  22. } else {
  23. next(&quot;/&quot;);
  24. }
  25. } else {
  26. next(&quot;/&quot;);
  27. }
  28. };
  29. export default [{
  30. path: &quot;/dashboard&quot;,
  31. name: &quot;dashboard-new&quot;,
  32. component: () =&gt;
  33. import (&quot;@/views/dashboard/new/DashboardNew.vue&quot;),
  34. meta: {
  35. requiresAuth: true
  36. },
  37. beforeEnter: (to, from, next) =&gt; {
  38. const currentUser = JSON.parse(localStorage.getItem(&quot;userData&quot;));
  39. if (currentUser &amp;&amp; currentUser.roles_id === 1) {
  40. getUserRole(to, from, next);
  41. } else {
  42. next(&quot;/&quot;);
  43. }
  44. }
  45. },
  46. {
  47. path: &quot;/user-dashboard&quot;,
  48. name: &quot;user-dashboard&quot;,
  49. component: () =&gt;
  50. import (&quot;@/views/dashboard/new/user/UserDashboard.vue&quot;),
  51. meta: {
  52. requiresAuth: true
  53. },
  54. beforeEnter: (to, from, next) =&gt; {
  55. const currentUser = JSON.parse(localStorage.getItem(&quot;userData&quot;));
  56. if (currentUser &amp;&amp; currentUser.roles_id === 2) {
  57. getUserRole(to, from, next);
  58. } else {
  59. next(&quot;/&quot;);
  60. }
  61. }
  62. }
  63. ];

But I am getting "Maximum call stack size exceeded" i tried to use switch condition and also didn't work

It is working fine on local but once i upload it to my host it show this problem

Is there anything wrong with my code?

答案1

得分: 0

在调试之后，我发现在本地环境中，currentUser.roles_id === 1 会返回数字1，但在主机环境中会返回字符串。

所以在这种情况下，我不需要指定'==='中的类型，所以我将其更改为'=='，只检查值。

英文:

After a debugging i found that in local currentUser.roles_id === 1 will return 1 as number but in host will return it as string

so in this case i don't need to specify the type in '===' so i changed it to '==' to check only the value

huangapple
  • 本文由 发表于 2023年2月8日 16:54:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/75383308.html
  • javascript
  • router
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定