Vaah Docs
The Basics

Access Control List (ACL)

An access control list (ACL) contains rules that grant or deny access to certain digital environments. A list of permissions associated with an object. The list specifies who or what is allowed to access the object and what operations are allowed to be performed on the object.

ACL in Controllers

VaahCms provide a method in Controller to check the User's access. You can call this method before execute an action.

public function getList(Request $request)
    {

        if(!\Auth::user()->hasPermission('has-access-of-users-section'))
        {
            $response['success'] = true;
            $response['errors'][] = trans("vaahcms::messages.permission_denied");

            return response()->json($response);
        }

        $response = User::getList($request);
        return response()->json($response);
    }

ACL in View

You can call the Controller method inside view file

@section('content')


        @if(\Auth::user()->hasPermission('has-access-of-users-section'))

            .........
            .........
            .........

        @endif
                
    
@endsection

ACL in Vue

import Vue from 'vue';
import { ToastProgrammatic as Toast } from 'buefy'
import {VaahHelper as Vaah} from "../../vaahvue/helpers/VaahHelper";

//---------Variables
let base_url = document.getElementsByTagName('base')[0].getAttribute("href");
let current_url = document.getElementById('current_url').getAttribute('content');
let debug = document.getElementById('debug').getAttribute('content');
//---------/Variables

let assets_path = base_url+"/vaahcms/backend/themes/vaahone/assets";
let assets_image_path = assets_path+"/images";

let json_url = base_url+"/backend/json";
let ajax_url = base_url+"/backend";

export default {
    namespaced: true,
    //=========================================================================
    state: {
        debug: debug,
        base_url: base_url,
        assets_path: assets_path,
        assets_image_path: assets_image_path,
        current_url: current_url,
        ajax_url: ajax_url,
        json_url: json_url,
        permissions: null,
        permissions_reload: false,
        ''''''''''
        ''''''''''
        ''''''''''
    },
    //=========================================================================
    mutations:{
        updateState: function (state, payload) {
            state[payload.key] = payload.value;
        },
        //-----------------------------------------------------------------
    },
    //=========================================================================
    actions:{
        //-----------------------------------------------------------------
        async getAssets({ state, commit, dispatch, getters }) {

            ''''''''''
            ''''''''''
            ''''''''''

        },
        //-----------------------------------------------------------------
        reloadAssets: function ({ state, commit, dispatch, getters }) {

            ''''''''''
            ''''''''''
            ''''''''''

        },
        //-----------------------------------------------------------------
        async getPermissions({ state, commit, dispatch, getters }) {

            if(!state.permissions || state.permissions_reload == true)
            {
                let url = state.ajax_url+'/json/permissions';
                let params = {};
                let data = await Vaah.ajax(url, params);

                let payload = {
                    key: 'permissions',
                    value: data.data.data.list
                };

                commit('updateState', payload);

                payload = {
                    key: 'permissions_reload',
                    value: false
                };

                commit('updateState', payload);

            }

        },
        //-----------------------------------------------------------------
        reloadPermissions: function ({ state, commit, dispatch, getters }) {
            let payload = {
                key: 'permissions_reload',
                value: true
            };
            commit('updateState', payload);
            dispatch('getPermissions');
        },
        //-----------------------------------------------------------------
    },
    //=========================================================================
    getters:{
        state(state) {return state;},
        permissions(state) {return state.permissions;},
        ''''''''''
        ''''''''''
    }

}

Now, you can call this function in Vue Route Middleware or in Vue Component

Vue Route Middleware

GetBackendAssets.js` file located at `VaahCms/..../Vue/routes/middleware/

GetBackendAssets.js

import {VaahHelper as Vaah} from "../../vaahvue/helpers/VaahHelper";
export default async function GetBackendAssets ({ to, from, next, store }){

    //--------------Redirect to Sign in
    if(!store.getters['root/state'].is_logged_in){
        return next({
            name: 'sign.in'
        })
    }
    //--------------/Redirect to Sign in

    await store.dispatch('root/getAssets');

    await store.dispatch('root/getPermissions');


    return next()
}

routes.js

let routes;
let routes_list=[];


routes= [
    { path: '*', redirect: '/' }
];



//----------Middleware

import GetBackendAssets from './middleware/GetBackendAssets'
//----------Middleware

import LayoutBackend from "./../layouts/Backend.vue";

let routes_backend =     {
    path: '/vaah',
    component: LayoutBackend,
    props: true,
    meta: {
        middleware: [
            ...........
            GetBackendAssets
            ...........
        ]
    }
};

routes.push(routes_backend);


export default routes;

Vue Component

        //---------------------------------------------------------------------
        async getPermissions() {
            await this.$store.dispatch(namespace+'/getPermissions');
        },
        //---------------------------------------------------------------------

In Controller, you have to write this code to get permissions list.

    public function getPermissions(Request $request)
    {


        $data = [];

        if(!\Auth::check())
        {
            $response['status'] = 'failed';
            $response['errors'] = [];
            return response()->json($response);
        }

        $response['status'] = 'success';
        $response['data']['list'] = \Auth::user()->permissions(true);

        return response()->json($response);

    }
    //----------------------------------------------------------

In Vue, there is a VaahHelper function that is used to check User access.

        //---------------------------------------------------------------------
        hasPermission: function(slug)
        {
            return this.$vaah.hasPermission(this.permissions, slug);
        },
        //---------------------------------------------------------------------

To know about VaahHelper.

Read Documentation

API

Registrations

Copyright © 2024