@rxap/authorization
Version:
Provides an Angular module and directives to manage authorization and permissions in your application. It allows you to control the visibility and enabled state of UI elements based on user permissions. The package includes an `AuthorizationService` to ch
122 lines (108 loc) • 31.1 kB
HTML
<html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@rxap/authorization - v19.1.0</title><meta name="description" content="Documentation for @rxap/authorization"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@rxap/authorization - v19.1.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>@rxap/authorization - v19.1.0</h1></div><div class="tsd-panel tsd-typography"><p>Provides an Angular module and directives to manage authorization and permissions in your application. It allows you to control the visibility and enabled state of UI elements based on user permissions. The package includes an `AuthorizationService` to check permissions and directives to easily integrate permission checks into your templates and components.</p>
<p><a href="https://www.npmjs.com/package/@rxap/authorization"><img src="https://img.shields.io/npm/v/@rxap/authorization?style=flat-square" alt="npm version"></a>
<a href="https://commitizen.github.io/cz-cli/"><img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square" alt="commitizen friendly"></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square" alt="styled with prettier"></a>
<img src="https://img.shields.io/librariesio/release/npm/@rxap/authorization" alt="Libraries.io dependency status for latest release, scoped npm package">
<img src="https://img.shields.io/npm/dm/@rxap/authorization" alt="npm">
<img src="https://img.shields.io/npm/l/@rxap/authorization" alt="NPM"></p>
<ul>
<li><a href="#installation">Installation</a></li>
<li><a href="#guides">Guides</a></li>
<li><a href="#generators">Generators</a>
<ul>
<li><a href="#init">init</a></li>
</ul>
</li>
</ul>
<a id="installation" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p><strong>Add the package to your workspace:</strong></p>
<pre><code class="bash"><span class="hl-0">yarn</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">@rxap/authorization</span>
</code><button type="button">Copy</button></pre>
<p><strong>Install peer dependencies:</strong></p>
<pre><code class="bash"><span class="hl-0">yarn</span><span class="hl-1"> </span><span class="hl-2">add</span><span class="hl-1"> </span><span class="hl-2">@angular/core</span><span class="hl-1"> </span><span class="hl-2">@angular/forms</span><span class="hl-1"> </span><span class="hl-2">@angular/material</span><span class="hl-1"> </span><span class="hl-2">@rxap/utilities</span><span class="hl-1"> </span><span class="hl-2">rxjs</span><span class="hl-1"> </span>
</code><button type="button">Copy</button></pre>
<p><strong>Execute the init generator:</strong></p>
<pre><code class="bash"><span class="hl-0">yarn</span><span class="hl-1"> </span><span class="hl-2">nx</span><span class="hl-1"> </span><span class="hl-2">g</span><span class="hl-1"> </span><span class="hl-2">@rxap/authorization:init</span>
</code><button type="button">Copy</button></pre>
<a id="guides" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Guides<a href="#guides" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="authorization-developer-guide" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Authorization Developer Guide<a href="#authorization-developer-guide" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>The <code>@rxap/authorization</code> package provides a robust and flexible way to manage user permissions in Angular applications. It supports permission-based view rendering, component enabling/disabling, and hierarchical scoping.</p>
<a id="installation-1" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Installation<a href="#installation-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ol>
<li>
<p><strong>Directives</strong>: Import the <code>HasPermissionModule</code> in your application or feature module to use the directives in your templates:</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">HasPermissionModule</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@rxap/authorization'</span><span class="hl-1">;</span><br/><br/><span class="hl-1">@</span><span class="hl-0">NgModule</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-4">imports:</span><span class="hl-1"> [</span><br/><span class="hl-1"> </span><span class="hl-4">HasPermissionModule</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">// ...</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1">})</span><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-6">class</span><span class="hl-1"> </span><span class="hl-7">AppModule</span><span class="hl-1"> {}</span>
</code><button type="button">Copy</button></pre>
<p>Alternatively, you can import individual standalone directives as needed (e.g., <code>IfHasPermissionDirective</code>, <code>MatButtonHasEnablePermissionDirective</code>).</p>
</li>
<li>
<p><strong>Providers</strong>: Use the <code>provideAuthorization()</code> utility to configure the service and its dependencies (like disabling authorization via config).</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">provideAuthorization</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@rxap/authorization'</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">ApplicationConfig</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@angular/core'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-8">appConfig</span><span class="hl-1">: </span><span class="hl-7">ApplicationConfig</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-4">providers:</span><span class="hl-1"> [</span><br/><span class="hl-1"> </span><span class="hl-0">provideAuthorization</span><span class="hl-1">(),</span><br/><span class="hl-1"> </span><span class="hl-5">// ... other providers, ensure ConfigService is also provided/available if needed</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1">};</span>
</code><button type="button">Copy</button></pre>
</li>
</ol>
<a id="authorization-service" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Authorization Service<a href="#authorization-service" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The core of the package is the <code>AuthorizationService</code>. It holds the current user's permissions and provides methods to check access.</p>
<a id="setting-permissions" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Setting Permissions<a href="#setting-permissions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Permissions are stored as a list of strings. You typically set these after user authentication.</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">AuthorizationService</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@rxap/authorization'</span><span class="hl-1">;</span><br/><br/><span class="hl-1">@</span><span class="hl-0">Injectable</span><span class="hl-1">({ </span><span class="hl-4">providedIn:</span><span class="hl-1"> </span><span class="hl-2">'root'</span><span class="hl-1"> })</span><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-6">class</span><span class="hl-1"> </span><span class="hl-7">AuthService</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">constructor</span><span class="hl-1">(</span><span class="hl-6">private</span><span class="hl-1"> </span><span class="hl-4">authorizationService</span><span class="hl-1">: </span><span class="hl-7">AuthorizationService</span><span class="hl-1">) {}</span><br/><br/><span class="hl-1"> </span><span class="hl-0">login</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-5">// ... authenticate user ...</span><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-8">permissions</span><span class="hl-1"> = [</span><span class="hl-2">'user.read'</span><span class="hl-1">, </span><span class="hl-2">'user.write'</span><span class="hl-1">, </span><span class="hl-2">'admin.*'</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-6">this</span><span class="hl-1">.</span><span class="hl-4">authorizationService</span><span class="hl-1">.</span><span class="hl-0">setPermissions</span><span class="hl-1">(</span><span class="hl-4">permissions</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<a id="checking-permissions" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Checking Permissions<a href="#checking-permissions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can check permissions programmatically using <code>hasPermission</code> (sync) or <code>hasPermission$</code> (observable).</p>
<pre><code class="typescript"><span class="hl-5">// Synchronous check</span><br/><span class="hl-3">if</span><span class="hl-1"> (</span><span class="hl-6">this</span><span class="hl-1">.</span><span class="hl-4">authorizationService</span><span class="hl-1">.</span><span class="hl-0">hasPermission</span><span class="hl-1">(</span><span class="hl-2">'user.create'</span><span class="hl-1">)) {</span><br/><span class="hl-1"> </span><span class="hl-5">// ...</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-5">// Observable check</span><br/><span class="hl-6">this</span><span class="hl-1">.</span><span class="hl-4">authorizationService</span><span class="hl-1">.</span><span class="hl-0">hasPermission$</span><span class="hl-1">(</span><span class="hl-2">'user.create'</span><span class="hl-1">).</span><span class="hl-0">subscribe</span><span class="hl-1">(</span><span class="hl-4">canCreate</span><span class="hl-1"> </span><span class="hl-6">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">// ...</span><br/><span class="hl-1">});</span>
</code><button type="button">Copy</button></pre>
<a id="permission-logic--wildcards" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Permission Logic & Wildcards<a href="#permission-logic--wildcards" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The service supports <strong>dot notation</strong> and <strong>wildcards</strong>:</p>
<ul>
<li><strong>Exact Match</strong>: <code>'user.read'</code> matches <code>'user.read'</code>.</li>
<li><strong>Wildcards (<code>*</code>)</strong>: The <code>*</code> character matches any sequence of characters.
<ul>
<li><code>'admin.*'</code> matches <code>'admin.settings'</code>, <code>'admin.users'</code>, etc.</li>
<li><code>'*.read'</code> matches <code>'user.read'</code>, <code>'product.read'</code>, etc.</li>
<li><code>'*'</code> matches everything (superuser).</li>
</ul>
</li>
</ul>
<a id="directives" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Directives<a href="#directives" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The package provides several directives to деклараtively control the UI based on permissions.</p>
<a id="structural-directive-rxapifhaspermission" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Structural Directive: <code>*rxapIfHasPermission</code><a href="#structural-directive-rxapifhaspermission" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Conditionally renders an element if the user has the specified permission.</p>
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-11">*rxapIfHasPermission</span><span class="hl-1">=</span><span class="hl-12">"'feature.view'"</span><span class="hl-9">></span><br/><span class="hl-1"> You can see this feature.</span><br/><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><br/><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-11">*rxapIfHasPermission</span><span class="hl-1">=</span><span class="hl-12">"'feature.admin'; else accessDenied"</span><span class="hl-9">></span><br/><span class="hl-1"> Admin Panel</span><br/><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><br/><span class="hl-9"><</span><span class="hl-10">ng-template</span><span class="hl-1"> </span><span class="hl-11">#accessDenied</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">p</span><span class="hl-9">></span><span class="hl-1">Access Denied</span><span class="hl-9"></</span><span class="hl-10">p</span><span class="hl-9">></span><br/><span class="hl-9"></</span><span class="hl-10">ng-template</span><span class="hl-9">></span>
</code><button type="button">Copy</button></pre>
<a id="enabledisable-directive-rxaphasenablepermission" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Enable/Disable Directive: <code>rxapHasEnablePermission</code><a href="#enabledisable-directive-rxaphasenablepermission" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Disables the host component if the user lacks the permission. This is often better than hiding controls entirely, as it shows what is available.</p>
<p><strong>Supported Components:</strong></p>
<ul>
<li>Native Buttons (<code><button></code>)</li>
<li>Angular Material Buttons (<code>mat-button</code>, <code>mat-raised-button</code>, <code>mat-icon-button</code>, <code>mat-fab</code>, etc.)</li>
<li>Angular Material Input (<code>matInput</code>)</li>
<li>Angular Material Select (<code>mat-select</code>)</li>
<li>Angular Material Checkbox (<code>mat-checkbox</code>)</li>
<li>Angular Material Slide Toggle (<code>mat-slide-toggle</code>)</li>
<li>Reactive Forms Controls (<code>[formControl]</code>, <code>[formControlName]</code>)</li>
</ul>
<p><strong>Usage:</strong></p>
<pre><code class="html"><span class="hl-5"><!-- Button is disabled without 'user.delete' permission --></span><br/><span class="hl-9"><</span><span class="hl-10">button</span><span class="hl-1"> </span><span class="hl-11">mat-button</span><span class="hl-1"> </span><span class="hl-11">[rxapHasEnablePermission]</span><span class="hl-1">=</span><span class="hl-12">"'user.delete'"</span><span class="hl-1"> </span><span class="hl-11">(click)</span><span class="hl-1">=</span><span class="hl-12">"deleteUser()"</span><span class="hl-9">></span><br/><span class="hl-1"> Delete User</span><br/><span class="hl-9"></</span><span class="hl-10">button</span><span class="hl-9">></span><br/><br/><span class="hl-5"><!-- Form control is disabled without 'user.edit' permission --></span><br/><span class="hl-9"><</span><span class="hl-10">input</span><span class="hl-1"> </span><span class="hl-11">matInput</span><span class="hl-1"> </span><span class="hl-11">[formControl]</span><span class="hl-1">=</span><span class="hl-12">"emailCtrl"</span><span class="hl-1"> </span><span class="hl-11">[rxapHasEnablePermission]</span><span class="hl-1">=</span><span class="hl-12">"'user.edit'"</span><span class="hl-9">></span>
</code><button type="button">Copy</button></pre>
<a id="write-permission-directive-rxaphaswritepermission" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Write Permission Directive: <code>rxapHasWritePermission</code><a href="#write-permission-directive-rxaphaswritepermission" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Sets the <code>readonly</code> attribute of an element based on permission. Useful for inputs where you want to show the value but prevent editing.</p>
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">input</span><span class="hl-1"> </span><span class="hl-11">[rxapHasWritePermission]</span><span class="hl-1">=</span><span class="hl-12">"'user.edit'"</span><span class="hl-1"> </span><span class="hl-11">value</span><span class="hl-1">=</span><span class="hl-12">"Read-only unless you have permission"</span><span class="hl-9">></span>
</code><button type="button">Copy</button></pre>
<a id="scopes-and-hierarchical-permissions" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Scopes and Hierarchical Permissions<a href="#scopes-and-hierarchical-permissions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The package uses a specific concept for scoping permissions, allowing you to reuse components with generic permission checks in different contexts.</p>
<a id="how-scoping-works" class="tsd-anchor"></a><h3 class="tsd-anchor-link">How Scoping Works<a href="#how-scoping-works" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Scopes use <strong>slash notation</strong> (<code>scope/permission</code>) in the permission list.</p>
<ul>
<li><strong>Identifiers</strong>: The code checks for a simple ID (e.g., <code>'edit'</code>).</li>
<li><strong>Permissions</strong>: Can be global (e.g., <code>'admin'</code>) or scoped (e.g., <code>'products/edit'</code>).</li>
<li><strong>Context</strong>: A component defines its scope (e.g., <code>'products'</code>).</li>
</ul>
<p>When checking for <code>'edit'</code> inside the <code>'products'</code> scope:</p>
<ol>
<li>The service looks for permissions starting with <code>'products/'</code>.</li>
<li>It strips the prefix. <code>'products/edit'</code> becomes <code>'edit'</code>.</li>
<li>It checks if the user has <code>'edit'</code>.</li>
</ol>
<p>Global permissions (without slashes) are always included in the check.</p>
<a id="using-setauthorizationscope" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Using <code>setAuthorizationScope</code><a href="#using-setauthorizationscope" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can define a scope for a component subtree using the <code>setAuthorizationScope</code> helper function.</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">setAuthorizationScope</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@rxap/authorization'</span><span class="hl-1">;</span><br/><br/><span class="hl-1">@</span><span class="hl-0">Component</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-4">selector:</span><span class="hl-1"> </span><span class="hl-2">'app-product-list'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">template:</span><span class="hl-1"> </span><span class="hl-2">`</span><br/><span class="hl-2"> <!-- This checks for 'products/create' (mapped to 'create') --></span><br/><span class="hl-2"> <button *rxapIfHasPermission="'create'">Create Product</button></span><br/><span class="hl-2"> `</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">providers:</span><span class="hl-1"> [</span><br/><span class="hl-1"> </span><span class="hl-0">setAuthorizationScope</span><span class="hl-1">(</span><span class="hl-2">'products'</span><span class="hl-1">),</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1">})</span><br/><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-6">class</span><span class="hl-1"> </span><span class="hl-7">ProductListComponent</span><span class="hl-1"> {}</span>
</code><button type="button">Copy</button></pre>
<p>If the user has the permission <code>'products/create'</code>, they will see the button. If they have <code>'users/create'</code>, they will not (unless they are also in the <code>'users'</code> scope).</p>
<a id="nested-scopes" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Nested Scopes<a href="#nested-scopes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>You can technically nest scopes by providing dot-separated scopes (e.g., <code>'admin.users'</code>), which would look for <code>'admin.users/permission'</code>.</p>
<a id="disabling-authorization-for-development" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Disabling Authorization for Development<a href="#disabling-authorization-for-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The <code>provideAuthorization()</code> function automatically configures the service to check the configuration for <code>authorization.disabled</code>.</p>
<p>If you are using <code>@rxap/config</code>, you can disable authorization by setting the <code>authorization.disabled</code> property to <code>true</code> in your configuration file/environment.</p>
<pre><code class="json"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-13">"authorization"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-13">"disabled"</span><span class="hl-1">: </span><span class="hl-6">true</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
</code><button type="button">Copy</button></pre>
<p>This is useful for local development or testing environments where you want to bypass permission checks.</p>
<a id="generators" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Generators<a href="#generators" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="init" class="tsd-anchor"></a><h2 class="tsd-anchor-link">init<a href="#init" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><blockquote>
<p>Initialize the package in the workspace</p>
</blockquote>
<pre><code class="bash"><span class="hl-0">nx</span><span class="hl-1"> </span><span class="hl-2">g</span><span class="hl-1"> </span><span class="hl-2">@rxap/authorization:init</span>
</code><button type="button">Copy</button></pre>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#installation"><span>Installation</span></a><a href="#guides"><span>Guides</span></a><a href="#authorization-developer-guide"><span>Authorization <wbr/>Developer <wbr/>Guide</span></a><ul><li><a href="#installation-1"><span>Installation</span></a></li><li><a href="#authorization-service"><span>Authorization <wbr/>Service</span></a></li><li><ul><li><a href="#setting-permissions"><span>Setting <wbr/>Permissions</span></a></li><li><a href="#checking-permissions"><span>Checking <wbr/>Permissions</span></a></li><li><a href="#permission-logic--wildcards"><span>Permission <wbr/>Logic & <wbr/>Wildcards</span></a></li></ul></li><li><a href="#directives"><span>Directives</span></a></li><li><ul><li><a href="#structural-directive-rxapifhaspermission"><span>Structural <wbr/>Directive: *rxap<wbr/>If<wbr/>Has<wbr/>Permission</span></a></li><li><a href="#enabledisable-directive-rxaphasenablepermission"><span>Enable/<wbr/>Disable <wbr/>Directive: rxap<wbr/>Has<wbr/>Enable<wbr/>Permission</span></a></li><li><a href="#write-permission-directive-rxaphaswritepermission"><span>Write <wbr/>Permission <wbr/>Directive: rxap<wbr/>Has<wbr/>Write<wbr/>Permission</span></a></li></ul></li><li><a href="#scopes-and-hierarchical-permissions"><span>Scopes and <wbr/>Hierarchical <wbr/>Permissions</span></a></li><li><ul><li><a href="#how-scoping-works"><span>How <wbr/>Scoping <wbr/>Works</span></a></li><li><a href="#using-setauthorizationscope"><span>Using set<wbr/>Authorization<wbr/>Scope</span></a></li><li><a href="#nested-scopes"><span>Nested <wbr/>Scopes</span></a></li></ul></li><li><a href="#disabling-authorization-for-development"><span>Disabling <wbr/>Authorization for <wbr/>Development</span></a></li></ul><a href="#generators"><span>Generators</span></a><ul><li><a href="#init"><span>init</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">@rxap/authorization - v19.1.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>