Authorization

In many admin panel applications, you will need users with different roles or permissions to restrict some areas. Olobase Admin supports this feature at several levels.

Backend Priority

Get User Permissions

It is recommended that you review the relevant authentication section of this guide before continuing. The said section contains everything you need to know about user authentication and retrieving user information.

As you see in the authentication guide, each authentication provider must implement a specific getPermissions() method. This role obtains permissions from a valid user object returned by the API via the checkAuth() provider method. These permissions are returned as an array array. Permissions can be anything you want, from a low-level special permission like create_book to a more general role as editor. It's up to you to find the appropriate level of detail you need. For example, general role-based ["editor", "author"] or more granular permission-based ["list_author", "show_author", "list_book", "show_book", "create_book"] we can imagine like.

Resources

You can define specific access permissions for each action of each resource. These permissions are reflected throughout the application. In particular, the getResourceLink() helper hides or shows all CRUD action keys linked to that resource, as well as resource-specific menus. To do this, simply define a new permission for the relevant resource object:

src/resources/index.js

export default [
  {
    name: "reviews",
    icon: "mdi-comment",
    permissions: [
      { name: "admin", actions: ["list", "show", "create", "edit", "delete"] },
      { name: "editor", actions: ["list", "show", "edit"] },
      { name: "author", actions: ["list", "show", "edit", "delete"] },
    ],
  },
]

The Permissions property is a simple string or array of objects. If you want this permission to apply to all actions, use simple string. The object format allows you to define more detailed permissions for each action of resources. Once the user has this permission, simply use name for the permission name and actions for the list of allowed actions.

Default Behavior

By default, if no permissions are set, all authenticated users can access all processes for this resource.

Excluded Actions

The general actions actions or exception except properties are prioritized over the permissions option for excluded actions only. So if you use actions or excluded features, specific permissions for excluded actions will have no effect.

Advanced Usage

In case the resource permission API above is not enough for you, you can still pass a specific canAction function to the Olobase Admin options; This gives you more control for permission action filtering. It is executed on every resource link (if you are using admin.getResourceLink or admin.getResourceLinks) or on any resource CRUD action key to know whether it should be active based on user permissions.

This customizable function takes a params object with 3 properties:

src/plugins/admin.js

import OlobaseAdmin from "olobase-admin";
//...
let admin = new OlobaseAdmin(import.meta.env);
/**
 * Install admin plugin
 */
export default {
  install: (app, http, resources) => {
    admin.setOptions({
      //...
      canAction: ({ resource, action, can }) => {
        if (can(["admin"])) {
          return true;
        }
        // any other custom actions on given resource and action...
      },
      //...
    });
    admin.init();
    OlobaseAdmin.install(app); // install layouts & components
  },
};

Override or Default

If the callback returns a valid boolean value, the action will be considered valid regardless of the permission value set in the relevant resource. If nothing is returned, the default behavior is executed.

Helpers

Olobase Admin gives you a global admin.can() helper method that you can use anywhere, allowing you to quickly test whether the current user has the capabilities. If the authenticated user has one of these, it receives an array string, which is the list of permissions you want to test and return true.

<template>
  <va-form :id="id" :item="item">
    <va-text-input source="isbn" v-if="admin.can(['isbn_edit'])"></va-text-input>
  </va-form>
</template>

<script>
export default {
  inject: ['admin'],
  method() {
    onSubmit() {
      if (this.admin.can(["book_edit"])) {

      }
    },
  },
};
</script>

OR and && Conditions

You can use the combinations || and && to easily hide or show links in the sidebar within the array based on permissions as in the following example:

src/_nav.js

export default  {

  build: async function(t, admin) {

    const user = await admin.can(["user"]);
    const adminUser = await admin.can(["user", "admin"]);

    return [
      {
        icon: "mdi-view-dashboard",
        text: i18n.t("menu.dashboard"),
        link: "/",
      },
      ...admin.getResourceLinks(["publishers", "authors", "books", "reviews"]),
      adminUser.can(["admin"]) && {
        icon: "mdi-settings",
        text: i18n.t("menu.settings"),
        link: "/settings",
      },
      (user || adminUser.can(["admin", "editor"])) && {
        icon: "mdi-message",
        text: i18n.t("menu.feedback"),
        link: "/feedback",
      },
      { icon: "mdi-help-circle", text: i18n.t("menu.help"), link: "/help" },
    ];

  } // end func

} // end class