vue-restricted-access

This package is useful when you need to block certain elements/components on the page from the user to access it. This package is fully customizable, you can change the background color, blur, opacity, status message etc by passing apropriate values to the settings object. The package also allows the users to implement their own custom status box.

Codesandbox Demo

Example usecases:

1. lock components and force user to login/signup to vue
2. Users with insufficient permissions

How to install

npm install --save vue-restricted-access

How to use

Import in Components where you want to use the package

import VueRestrictedAccess from 'vue-restricted-access'
import "vue-restricted-access/dist/vue-restricted-access.css";

Register it as a component:

components: {
  RestrictedAccess: VueRestrictedAccess
}

Usage

Just wrap the component which you need to restrict the users from viewing and pass the restricted param as true

<resrticted-access :restricted="true">
  <my-component></my-component>
</restricted-access>

Customizable settings

You can also send an additional settings object with any of these parameters

<restricted-access :restricted="true" :settings="mySettingsObj">

settings object will take the following properties:

Property	Required	Type	Default	Description
strict	false	Boolean	false	strict mode will fully remove the element from DOM instead of blurring it (for more sensitive contents)
opacity	false	Number	0.5	Opacity of the overlay
blur	false	Number	3	Blur radius
showLock	false	Boolean	true	show lock icon
statusText	false	String	''	Status text to display on the restricted access component
statusTextColor	false	String	#000	Status text color
showStatusText	false	Boolean	true	show status text
customStatusBox	false	Boolean	false	If you set custom status to true then you need use scoped slot with name custom-message to pass your own component
customStatusPositionCenter	false	Boolean	true	If this is passed true then your custom status box will be in the center

Example settings object

mySettingsObj = {
  strict: false,
  opacity: 0.5,
  blur: 3,
  showStatusText: true,
  statusText: 'Signup to access this content',
  statusTextColor: '#000',
  showLock: true,
  customStatusBox: false,
  customStatusPositionCenter: true
}

Notes:

1. On strict mode, use a wrapper component over the <restricted-access> component and set width and height or override the CSS