How to get current user's roles in custom Vue based portal page?

I’ve used doppio to add a spa portal page to my custom app, and now I am wanting to show different things based on the current user’s roles, but I can’t seem to figure out the correct way to do so. I found if the user has permission, I can make a call to /api/resource/User/ and use that, but I don’t want to give that extra permission to the users if I don’t have to.

Alternatively, is there a way to add context to the Vue pages like you can do with the regular static pages that would allow me to get the user’s roles?

Thanks for any advice or help

Use frappe.get_roles() via a Whitelisted Method

You can expose a safe, minimal API in your custom app that only returns the current user’s roles:
Step 1 :


# in your_app/api.py
import frappe
from frappe import _

@frappe.whitelist()
def get_user_roles():
    if frappe.session.user == "Guest":
        return []
    return frappe.get_roles(frappe.session.user)

step 2 : Now call it from Vue

frappe.call('your_app.api.get_user_roles').then(r => {
  let roles = r.message
  console.log("User roles:", roles)
  if (roles.includes("Sales User")) {
    // show sales components
  }
})

Hi, thanks for your reply, I did get it working through that method and using the REST API, but I have to ask, how do you get the frappe object for a portal page? I know for client/server side scripts in frappe builder have that object automatically attached, but I could never figure out how to get it to attach to a custom portal page. I’ve tried various things but the frappe object always comes back as undefined.

Thanks for the help