Check if user is an admin vue router and vuex

Question

I am building an app that has an admin area. Users are flagged as admin or not in the database via:

admin = 1

I am pulling my data in using axios, then setting the user in my state using vuex. However, I am struggling how to return the users admin status from within vue router. Here is a sample of what I am trying to do.

import store from '@/js/store/store.js';
// etc
router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.isAdmin)) {
        if (store.getters.getUser.admin == 1) {

            next();
            return;
        }

        next('/dashboard');

    } else {
        next();
    }
});

So if the user is flagged as admin, they can view the admin area but if not they are redirected to the dashboard.

However, store.getters.getUser.admin == 1 returns undefined.

In my store, I have the below:

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);
          });
        });
      },
      logout({commit}) {
        return new Promise((resolve, reject) => {
          commit('logout');
          localStorage.removeItem('token');
          delete axios.defaults.headers.common['Authorization'];
          resolve();
        });
      },
      register({commit}, user) {
        return new Promise((resolve, reject) => {
          commit('auth_request');
          axios({url: api_base + '/register', data: user, method: 'post'})
          .then(resp => {
            const token = resp.data.token;
            localStorage.setItem('token', token);
            axios.defaults.headers.common['Authorization'] = token;
            commit('auth_success', {token, token});
            resolve(resp);
          })
          .catch(err => {
            commit('auth_error', err);
            localStorage.removeItem('token');
            reject(err);
          });
        });
      },
      fetchUser({state, commit}) {

        var instance = axios.create({
          baseURL: api_base,
          headers: {
            Accept: 'application/json',
            Authorization: 'Bearer ' + state.token,
            'Content-Type': 'application/json'
          }
        });

        instance.get('/user')
        .then(resp => {
          let user = resp.data;
          commit('set_user', user);
        })
        .catch(err => {
          console.log(err);
          commit('set_user', null);
        });

      }
    },
    getters : {
      isLoggedIn: state => !!state.token,
      authStatus: state => state.status,
      getUser: state => state.user
    }

  });

console.log'in state.getters returns the expected data but console logging state.getters.getUser returns undefined.

Is there an easier way to check if the user is an admin?

Thanks

Answer 1

...console logging state.getters.getUser returns undefined.

Are you trying to access getters in state instead of in store? Does console logging store.getters.getUser make a difference?

Is there an easier way to check if the user is an admin?

I don't know if you'd consider this easier but typically I set up a specific getter for a check like that.

getters : {
  isLoggedIn: state => !!state.token,
  authStatus: state => state.status,
  getUser: state => state.user,
  isAdmin: state => state.user.admin == 1
}

And if non-admin is admin = 0 and admin is admin = 1, then you can simplify it as,

  isAdmin: state => state.user.admin

since 1 resolves to true and 0 to false, you can just use

if (isAdmin) {
   // allow access
} 

But then be sure you're storing user.admin as 1 or 0 and not "1" or "0".