Auth Vuex

auth.js

import axios from 'axios'
import Ls from '@services/ls'
import router from '@router'
import VueJwtDecode from 'vue-jwt-decode'


export const fullsepp_axios = axios.create({
    headers: { 'Content-Type': 'application/json'},
    timeout: 3000,
    keepAlive: true
    
})

let endpoint_url = 'http://localhost:3000/api';

let global_register_clientId= '',
    global_register_secret = '',
    global_login_clientId = '',
    global_login_secret = '';
        
if(process.env.NODE_ENV === 'development'){
     global_register_clientId = "testclient" 
     global_register_secret = "testsecret"
     global_login_clientId =  "testclient"
     global_login_secret = "testsecret"
}else{
     global_register_clientId = "somethingelse" 
     global_register_secret = "somethingelse"
     global_login_clientId =  "somethingelse"
     global_login_secret = "somethingelse"
}



  const state = {
        isLoggedIn: getSavedState('auth.access_token'),
        userRoleCount: getSavedState('auth.user_role_count'),
        account_status: '',
        currentPageMessage : '',
        currentPageMessage_status: ''
  }
  
  const mutations = {
    SET_USER (state, data) {
      state.isLoggedIn = data.loggedin
      state.userRoleCount = data.user_role_count 
    },
    SET_ACCOUNT_STATUS(state,data){
        state.account_status = data
    },
    UNSET_USER (state) {
      state.isLoggedIn = false
      state.userRoleCount = 0
    },
    SET_MESSAGE(state,{ message, status }){
        state.currentPageMessage = message
        state.currentPageMessage_status = status
    }
    
  }
  
  
  const actions = {
    loginUser({commit, dispatch}, login_data) {
        dispatch('clear_errors')
        let current_api = endpoint_url+ 'signin'
        let login_details = {
            email :login_data.email_address,
            password: login_data.password,
            clientId: global_login_clientId,
            secret: global_login_secret,
    
        }
        return fullsepp_axios.post(current_api,login_details)
            .then((response) => {
               // Get current login response
                let login_response_data = {
                    access_token : response.data.accessToken,
                    refreshToken : response.data.refreshToken,
                    tokenType : response.data.tokenType,
                    issuedAt : response.data.issuedAt,
                    expiresAt : response.data.expiresAt,
                }
                
                // Decode token
                let current_decoded_token = VueJwtDecode.decode(response.data.accessToken)

                
                // If decoded data is null exit.
                if(current_decoded_token.length < 1) return;

                // Get current decoded data in array
                let decoded_token_details = {
                    decoded_algorithm : current_decoded_token.alg,
                    decoded_ci : current_decoded_token.ci, // Client secret
                    decoded_name : current_decoded_token.dn, // // Display name for Individual, Company Name for Corporate
                    decoded_expiration : current_decoded_token.exp, // Expiry time
                    decoded_issued_at : current_decoded_token.iat, // Issued at time
                    decoded_user_roles : current_decoded_token.roles, //user roles 
                    decoded_user_id : current_decoded_token.sub, // User id - Subject : profile id
                    decoded_user_tt : current_decoded_token.tt, // Token Type AT (Access Token), RT (Refresh Token), ST (Switch Token)
                    decoded_user_type : current_decoded_token.ut, // User type - "IN" // IN : Individual, CO : Corporate 
                }
                
                // Check if user has at least one role
                let current_user_roles = 0;
                if(decoded_token_details.decoded_user_roles.length > 0){
                    decoded_token_details.decoded_user_roles.forEach(function(user_role) {
                        // Save user roles to local storage
                        saveState('auth.user_role_' + current_user_roles, user_role)
                        current_user_roles++
                    });
                }
                
                // Save data to local storage
                saveState('auth.access_token', login_response_data.access_token)
                saveState('auth.refresh_token', login_response_data.refreshToken)
                saveState('auth.token_expire_date', decoded_token_details.decoded_expiration)
                saveState('auth.user_name', decoded_token_details.decoded_name)
                saveState('auth.user_type', decoded_token_details.decoded_user_type)
                saveState('auth.user_id', decoded_token_details.decoded_user_id)
                saveState('auth.user_role_count', current_user_roles)
                
                
                
                
                //Tell the store that now user is loggedin.
                commit('SET_USER', { loggedin: true, user_role_count: current_user_roles});    
                //Send a message to frontend to tell about succesfull login.
                //This change is watched in Register.vue page. 
                commit('SET_MESSAGE', {message: 'Loggedin succesfuly', status: 'success'})

                // Push router to profile page
                router.push("/profile");
                
                
            }).catch((error) => {
                // Get current error code
                let current_error_code = error.response.data.code
                // Check for error translation
               
                dispatch('get_error_handler', error.response.data.code)
                commit('UNSET_USER',{
                    error:error.response.data
                })
            })
    },
    
    logOutUser({commit, state,dispatch}) {
        dispatch('clear_errors')

        // Remove states from localstorage
        removeState('auth.access_token')
        removeState('auth.refresh_token')
        removeState('auth.token_expire_date')
        removeState('auth.user_name')
        removeState('auth.user_type')
        removeState('auth.user_id')
        removeState('auth.user_role_count')

        // First get current user role counts
        let current_role_counts = state.userRoleCount
       
        // Loop through each user role count and remove them from local storage depending on user role count
        if(current_role_counts != '' ){
            var i;
            for (i = 0; i < current_role_counts.length; i++) { 
                removeState('auth.user_role_' + i)
            }
        }
        //Tell the store that now user is loggedin.
        commit('UNSET_USER', true);    
        //Send a message to frontend to tell about succesfull login.
        //This change is watched in Register.vue page. 
        commit('SET_MESSAGE', {message: 'Logged out succesfuly', status: 'success'})

        // Push router to profile page
        router.push("/");
      
    },
    
    register_user({commit, dispatch}, register_data) {
        dispatch('clear_errors')
        let current_api = endpoint_url+ 'signup'
        let register_details = '';
        if(register_data.type == 'IN'){
            register_details = {
                username: register_data.username,
                displayName: register_data.displayName,
                email: register_data.email,
                dateOfBirth: register_data.dateOfBirth,
                password: register_data.password,
                passwordRetype: register_data.passwordRetype,
                type: register_data.type,
                clientId: global_register_clientId,
                secret: global_register_secret,
            }
        }else{
            register_details = {
                companyName: register_data.companyName,
                accountName: register_data.accountName,
                email: register_data.email,
                dateOfFoundation: register_data.dateOfFoundation,
                password: register_data.password,
                passwordRetype: register_data.passwordRetype,
                type: register_data.type,
                clientId: global_register_clientId,
                secret: global_register_secret,
            }
        }
        
        return fullsepp_axios.post(current_api,register_details)
            .then((response) => {
                commit('SET_MESSAGE', {message: 'Registered succesfuly. Please check your email for activation.', status: 'success'})
                
            }).catch((error) => {
                dispatch('get_error_handler', error.response.data.code)
            })


    

    },

    activate_user({commit, dispatch}, token_data) {
        dispatch('clear_errors')
        let current_api = endpoint_url+ 'activation?token=' + token_data
        if(current_api == '') return
        return fullsepp_axios.get(current_api)
        .then((response) => {
            commit('SET_ACCOUNT_STATUS', true)
            commit('SET_MESSAGE', {message: 'Your account has been activated succesfuly. Please login.', status: 'success'})
        }).catch((error) => {
            commit('SET_ACCOUNT_STATUS', false)
            dispatch('get_error_handler', error.response.data.code)
        })
    },
    clear_errors({commit}){
            commit('SET_MESSAGE', {message: '', status: ''})
    },
    print_success({commit} ,data){
        commit('SET_MESSAGE', {message: data.message, status: data.status})
    },
    get_error_handler({commit,dispatch}, code_data) {
        // Check error translation
        switch(code_data){
            case '0001':
                commit('SET_MESSAGE', {message: 'Bad credentials', status: 'error'}) 
            break;
            case '0002':
                dispatch('refreshToken')
                commit('SET_MESSAGE', {message: 'Access Token Required/Invalid/Expired', status: 'error'}) 
            break;
            case '0053':
                commit('SET_MESSAGE', {message: 'Already Existing Username', status: 'error'}) 
            break;
            case '0050':
                commit('SET_MESSAGE', {message: 'Already Existing Email', status: 'error'}) 
            break;
            case '0062':
                commit('SET_MESSAGE', {message: 'Activation Token Invalid', status: 'error'}) 
            break;
            case '9999':
                commit('SET_MESSAGE', {message: 'Unknown Error', status: 'error'}) 
                
            break;
        }
    }
    // End of get_error_handler
   
  }
   
  const getters = {
    // This getter is a computed property that is used to get page alerts inside pages. 
    getPageAlerts(state){
        let current_message = {
            current_message : state.currentPageMessage,
            current_message_status : state.currentPageMessage_status,
        }
        return current_message
    },
    // End of getPageAlerts getter
     loggedIn(state){
         return state.isLoggedIn
     },
     getCurrentRoleCount(state){
         return state.userRoleCount
     },
     getCurretUserAccessToken(){
         return state.isLoggedIn
     },
     getCurretUserAccountStatus(){
        return state.account_status
    }
     

    
  };
  
// ===
// Private helpers
// ===

function getSavedState(key) {
    return Ls.get(key);
}
function saveState(key, state) {
    Ls.set(key,state);
}
function removeState(key) {
    Ls.remove(key);
}

export default {
    namespaced : true, 
    state, mutations, actions, getters
}