error in router



  • I did not have this error before, but when I go to localstorage I get this

     axiosInstance.post('api/auth/Login', oLoginModel).then(response => {
          //console.log(response);
          commit("setTOKEN", response.data.token);
          LocalStorage.set("_token", response.data.token);
          LocalStorage.set("_loggedIn", true);
    
          LocalStorage.set("_name", response.data.name);
          LocalStorage.set("_image", response.data.image);
          LocalStorage.set("_id", response.data.id);
          LocalStorage.set("_employeeid", response.data.employeeid);
    
          commit("setStatusLoginLoading", false); //Loading false
              commit("setUserDetails", {
              name: response.data.name,
              image: response.data.image,
              id: response.data.id,
              employeeid: response.data.employeeid
            });
    
          this.$router.push("/");  //this error
    
        }).catch(err => {
          
    
       });
    
    

    my router :

    const routes = [
      {
        path: "/",
        component: () => import("layouts/MainLayout.vue"),
        children: [
          {
            path: "/",
            name:"index",
            component: () => import("pages/Index.vue"),
            meta: { requiresAuth: true }
          },
          {
            path: "/index2",
            name: "index2",
            component: () => import("pages/index2.vue"),
            meta: { requiresAuth: true }
          },
          {
            path: "/user",
            name: "user",
            component: () => import("pages/User.vue"),
            meta: { requiresAuth: true }
          }
        ]
      },
      {
        path: "/",
        component: () => import("layouts/Auth.vue"),
        children: [
          {
            path: "/Security/Login",
            name: "login",
            component: () => import("pages/Login.vue"),
            meta: {
              requiresVisitor: true
            }
          }
        ]
      }
    ];
    
    // Always leave this as last one
    if (process.env.MODE !== "ssr") {
      routes.push({
        path: "*",
        component: () => import("pages/Error404.vue")
      });
    }
    
    export default routes;
    
    
    vue-router.esm.js?8c4f:2117 RangeError: Maximum call stack size exceeded
        at RegExp.[Symbol.replace] (<anonymous>)
        at String.replace (<anonymous>)
        at encode (vue-router.esm.js?8c4f:201)
        at eval (vue-router.esm.js?8c4f:282)
        at Array.map (<anonymous>)
        at stringifyQuery (vue-router.esm.js?8c4f:256)
        at getFullPath (vue-router.esm.js?8c4f:357)
        at createRoute (vue-router.esm.js?8c4f:311)
        at _createRoute (vue-router.esm.js?8c4f:1622)
        at Object.match (vue-router.esm.js?8c4f:1512)
    


  • Are you doing anything else with your router like a beforeeach?



  • @jadedRepublic
    no, only add localstorage



  • this.$router.push({ name: ‘index’ }); does that give you an error?



  • Btw I would recommend using localforage, here Is an example:

    import localforage from 'localforage'
    
      export default {
        methods: {
          apilogin (login) {
            return new Promise((resolve, reject) => {
              var response = {
                data: {
                    token: 'Token',
                    loggedIn: 'loggedIn',
                    name: 'Name',
                    image: 'Image',
                    id: 'ID',
                    employeeid: 'Employeeid'
                }
              }
              resolve(response)
            })
          },
          login () {
            return this.apilogin({ email: 'john@doe.com', password: 'doe123' }).then((response) => {
              return localforage.setItem('token', response.data).then(() => {
                return localforage.getItem('token').then((token) => {
                  
                  commit("setUserDetails", token);
                  this.router.push({ name: 'index' });
    
                }).catch((e) => console.log('Failed to get storage tokens: ' + e.toString()))
              }).catch((e) => console.log('Failed to set storage tokens: ' + e.toString()))
            })
          }
        }
      }
    


  • @jadedRepublic

    I made this change and it works

    
      Router.beforeEach((to, from, next) => {
        var loggedIn = LocalStorage.getItem("_loggedIn")
    
        if (to.matched.some(record => record.meta.requiresAuth)) {
          if (!loggedIn) next({ name: 'login' })
          else next()
        } else next()
    
      })
    

Log in to reply