[Vuejs]-VueJs Maximum call stack size exceeded

by

1👍

✅

Your logic causes an infinite redirection to /login

try the following logic – I think it’s right

router.beforeEach((to, from, next) => {
  var requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (to.path != '/login' && !store.getters.isLoggedIn) {
    next({
      name: 'login'
    });
  } else if (to.path == '/login' && store.getters.isLoggedIn) {
    next({
      name: 'home'
    });
  } else {
    next();
  }
});

As a bonus, here’s what I mean by Promise constructor anti-pattern

axios returns a promise … no need to wrap it in a new Promise constructor

So, for example, your login function should be written

login({commit}, user){
    commit('auth_request');
    return axios({url: '/api/auth/login', data: user, method: 'POST' })
    .then(resp => {
        console.log('login data', resp);
        const token = resp.data.token;
        const type = resp.data.token_type;
        const user = resp.data.user;
        localStorage.setItem('token', token);
        localStorage.setItem('token_type', type);
        axios.defaults.headers.common['Authorization'] =  'Bearer ' + token;
        commit('auth_success', token, type, user);
        return resp;
    })
    .catch(err => {
        commit('auth_error');
        localStorage.removeItem('token');
        throw err;
    });
}
👤Jaromanda X

Leave a comment