CODEWITHSUNDEEP
vue.jsvue-router
Ryan Mc
Ryan Mc

Reputation: 935

Vue router - on refreshing browser window logs out my admin user

I have a router.beforeEach method that works perfectly when going through vue router but refreshing the page logs me back out

router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.isAdmin)) {
        if (store.getters.isAdmin) {
            next();
            return;
        }

        next('/dashboard');

    } else {
        next();
    }
});

So even if my admin status is "admin" I still get redirected to dashboard. Any ideas why!

EDIT:

This is how I am loggin in the user and storing their session/token

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

// set up our api end point 
var get_url = window.location;
var base_url = get_url .protocol + '//' + get_url.host;
const api_base = base_url + '/api/v1';

export default new Vuex.Store({
    state: {
        status: false,
        token: localStorage.getItem('token') || '',
        user: {}
    },
    mutations: {
      auth_request(state){
        state.status = 'loading';
      },
      auth_success(state, {token, user}) {
        state.status = 'success';
        state.token = token;
        state.user = user;
      },
      auth_error(state){
        state.status = 'error';
      },
      logout(state){
        state.status = '';
        state.token = '';
      },
      set_user(state, user) {
        state.user = user;
      }
    },
    actions: {
      login({commit}, user){
        return new Promise((resolve, reject) => {
          commit('auth_request');
          axios({url: api_base + '/login', data: user, method: 'post' })
          .then(resp => {
            const token = resp.data.data;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = token;
            commit('auth_success', {token, token});
            resolve(resp);
          })
          .catch(err => {
            commit('auth_error');
            localStorage.removeItem('token');
            reject(err);
          });
        });
      },
    },
    getters : {
      isLoggedIn: state => !!state.token,
      authStatus: state => state.status,
      getUser: state => state.user,
      isAdmin: state => state.user.admin
    }

  });

So I am storing the token in localStorage - I am not sure if the local storage is actually working as I don't know how to see my local storage contents (though imagine this is easy to find out).

Upvotes: 1

Views: 1734

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

I'll make some assumptions about your app since I don't know the details, but here's my take.

When your app is initially loaded (i.e. on page refresh), the Vuex state is set to the initial values, which means the user is not logged in. The user has to go through the login process that your app provides, and then the Vuex state is updated with information about the logged in user.

If you refresh the page, your Vuex state is lost and you have to go through the login process again.

If you want to persist data across page reloads, you have to store some data on the client side (typically in LocalStorage). How this is done exactly can vary from app to app since it depends on how you have implemented logged in sessions; are you storing the session in a cookie, or are you using an auth token that you send with each request?

When the app is initially loaded, one of the first things it should do is check if there is a logged in session stored, and if so attempt to authenticate it to make sure it is still valid and retrieve from the server up-to-date information about that session (i.e. information about the logged in user). At minimum, you could store the user object in LocalStorage after logging in and then retrieve it when the app loads.

This is a big topic and I can't give you a succinct answer here, but I've given you some things to think about so you can research this topic further.

Upvotes: 2

Related Questions