***

title: "PermissionGuard"
generated: true
---------------

## PermissionGuard

<GenerationInfo sourceFile="packages/dashboard/src/lib/components/shared/permission-guard.tsx" sourceLine="44" packageName="@vendure/dashboard" since="3.4.0" />

This component is used to protect a route from unauthorized access.
It will render the children if the user has the required permissions.

*Example*

```tsx
<PermissionGuard requires={['UpdateTaxCategory']}>
    <Button type="submit">
        <Trans>Update</Trans>
    </Button>
</PermissionGuard>
```

```ts title="Signature"
function PermissionGuard(props: Readonly<PermissionGuardProps>): void
```

Parameters

### props

\<MemberInfo kind="parameter" type={`Readonly<<a href='/current/core/reference/dashboard/components/permission-guard#permissionguardprops'>PermissionGuardProps</a>>`} />

## PermissionGuardProps

<GenerationInfo sourceFile="packages/dashboard/src/lib/components/shared/permission-guard.tsx" sourceLine="12" packageName="@vendure/dashboard" since="3.4.0" />

The props for the PermissionGuard component.

```ts title="Signature"
interface PermissionGuardProps {
    requires: Permission | string | string[] | Permission[];
    children: React.ReactNode;
}
```

<div className="members-wrapper">

### requires

\<MemberInfo kind="property" type={`<a href='/current/core/reference/typescript-api/common/permission#permission'>Permission</a> | string | string[] | <a href='/current/core/reference/typescript-api/common/permission#permission'>Permission</a>[]`}   />

The permission(s) required to access the children.

### children

\<MemberInfo kind="property" type={`React.ReactNode`}   />

The children to render if the user has the required permissions.

</div>