How to get rid of "Maximum call stack size exceeded" error in vue router?

Question

Vue.js

I am making an application on VUE JS
There is a router that checks local storage before each route, whether there is a token or not.
You need to do this:
if there is no token -> redirect to "/authorisation"
if there is a token, then do nothing and show the page content, the routing that the user clicked on

I'm currently getting this error:

RangeError: Maximum call stack size exceeded

How can this be fixed?

index.js (vue router):

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/analytics",
    name: "Analytics",
    component: () => import("../views/analytics")
  },
  {
    path: "/authorization",
    name: "Authorization",
    component: () => import("../views/authorization")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  if (localStorage.getItem("token")) {
    next();
  } else {
    next("/authorization");
  }
});

export default router;

Answer 1

If you are already going to the authorization form, do not try to initiate this transition again - add to beforeEach in if. || to.name === 'Authorization'